Kann CSS :before und :after Pseudo-Elements Style Inline SVG verwenden?

Styling von Inline-SVG mit CSS :before und :after Pseudo-Elements

Einführung

CSS-Pseudoelemente :before und :after werden häufig verwendet, um HTML-Elemente mit dekorativem oder funktionalem Inhalt zu verbessern. Bei Inline-SVG-Elementen kann die Anwendung dieser Pseudoelemente jedoch auf Herausforderungen stoßen. In diesem Artikel wird untersucht, warum dies eine Herausforderung darstellt, und es wird eine mögliche Lösung vorgestellt.

SVG als ersetzter Inhalt

Inline-SVG-Elemente gelten als ersetzter Inhalt, d. h. sie ersetzen den ursprünglichen Inhalt des Element, auf das sie sich beziehen. Dieses Verhalten gilt für alle bildähnlichen Elemente, einschließlich SVG. Folglich sind generierte Inhalte, wie sie beispielsweise durch :before und :after erstellt wurden, in ersetzten Elementen nicht zulässig.

Warum :before und :after mit SVG fehlschlagen

In der MDN-Dokumentation heißt es, dass mit :before und :after erstellte Elemente „anonym ersetzte Elemente“ sind. Da ersetzte Inhalte keine generierten Inhalte enthalten können, erklärt dies, warum die Anwendung von :before und :after auf Inline-SVG unwirksam ist.

Mögliche Lösung – :outside Pseudo-Element

An Eine interessante Lösung wird in einem CSS-Entwurfsdokument mit dem Titel „CSS3 Generated and Replacementd Content Module“ vorgeschlagen. In diesem Dokument wird ein neues Pseudoelement eingeführt, :outside, das generierte Inhalte außerhalb des ersetzten Elements platziert. Durch die Verwendung von :outside können möglicherweise die Einschränkungen von :before und :after bei Verwendung mit Inline-SVG überwunden werden.

Fazit

Während die Verwendung von CSS: before und :after-Pseudoelemente in Inline-SVG werden im Allgemeinen nicht unterstützt. Das :outside-Pseudoelement bietet eine mögliche Lösung für die Platzierung generierter Inhalte neben SVG-Elementen. Entwickler sollten sich beim Entwerfen ihrer CSS-Stile der Unterschiede zwischen Inline- und ersetzten Elementen bewusst sein.

Das obige ist der detaillierte Inhalt vonKann CSS :before und :after Pseudo-Elements Style Inline SVG verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!