Warum funktioniert CSS „:before' nicht bei Inline-SVG-Elementen?

CSS :before on Inline SVG

Einführung

Das Stylen von Inline-SVG-Elementen mit :before und :after Pseudoelementen ist eine häufige Aufgabe im Web Entwicklung. Es ist jedoch wichtig, die Einschränkungen zu verstehen, die für ersetzte Elemente gelten, zu denen auch SVG gehört.

Das Problem

Im angegebenen Codebeispiel wird der auf das SVG-Element angewendete :before-Stil nicht widergespiegelt. Dies weist darauf hin, dass generierte Inhalte möglicherweise nicht auf SVG anwendbar sind.

Ersetzte Elemente und generierte Inhalte

Inline-SVG gilt als ersetztes Element. Das heißt, es ist nicht Teil des Inhaltsflusses, sondern ersetzt das übergeordnete Element. Generierte Inhalte hingegen sind Inhalte, die mithilfe von Pseudoelementen wie :before und :after in den Dokumentbaum eingefügt werden.

CSS-Spezifikationen

Spezifikationen für generierte Inhalte in CSS sind im definiert „CSS3-generiertes und ersetztes Inhaltsmodul.“ Gemäß diesem Dokument ist der generierte Inhalt innerhalb ersetzter Elemente nicht zulässig. Dies erklärt das Scheitern von :before-Styling auf dem SVG im Beispiel.

Eine mögliche Lösung: Das :outside-Pseudoelement

Während generierter Inhalt in ersetzten Elementen nicht unterstützt wird, ist das W3C-Dokument zitiert schlägt eine Lösung vor: das Pseudoelement :outside. Dieses Pseudoelement platziert generierte Inhalte außerhalb des ersetzten Elements und umgeht so effektiv die Einschränkung. Leider ist die Unterstützung für :outside derzeit begrenzt.

Fazit

Das Stylen von Inline-SVG mit :before oder :after ist aufgrund der Einschränkungen für ersetzte Elemente nicht möglich. Um dieses Problem zu beheben, erkunden Sie alternative Methoden wie die Verwendung von Klassen oder Attributen, um Elemente mit dem gewünschten Stil dynamisch hinzuzufügen.

Das obige ist der detaillierte Inhalt vonWarum funktioniert CSS „:before' nicht bei Inline-SVG-Elementen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!