Can CSS :before and :after Pseudo-elements Style Inline SVGs?

Styling Inline SVGs with CSS :before and :after

Using the CSS :before and :after pseudo-elements to style inline SVG elements has proven to be a challenge. Despite its potential to enhance the visual impact of SVGs, this approach faces limitations due to the nature of SVGs as replaced elements.

The :before and :after pseudo-elements are primarily used for generating content within an element, resulting in anonymous replaced elements. However, SVGs are already replaced elements, making it difficult to inject additional content using generated content.

The example provided (http://jsfiddle.net/wD56Q/) demonstrates the issue where the styling defined with :before fails to affect the SVG. This is because SVGs, like images, cannot contain generated content. They are considered atomic and cannot be affected by CSS properties that alter their internal content.

To overcome this limitation, one could explore experimental solutions like CSS :outside, a pseudo-element that places generated content outside the replaced element rather than inside it. However, this approach is still in development and may not be widely supported.

In conclusion, directly styling inline SVG elements using CSS :before and :after is currently not supported. As SVGs are replaced elements, they cannot contain generated content. Other approaches, such as CSS :outside, may provide potential solutions in the future, but their adoption remains uncertain.

The above is the detailed content of Can CSS :before and :after Pseudo-elements Style Inline SVGs?. For more information, please follow other related articles on the PHP Chinese website!