Why Doesn\'t CSS `:before` Work on Inline SVG Elements?

CSS :before on Inline SVG

Introduction

Styling inline SVG elements using :before and :after pseudo-elements is a common task in web development. However, it's important to understand the limitations imposed on replaced elements, which include SVG.

The Issue

In the given code example, the :before styling applied to the SVG element is not reflected, indicating that generated content might not be applicable to SVG.

Replaced Elements and Generated Content

Inline SVG is considered a replaced element, meaning it is not part of the flow of content but instead takes the place of the parent element. Generated content, on the other hand, is content inserted into the document tree using pseudo-elements like :before and :after.

CSS Specifications

Specifications for generated content in CSS are defined in the "CSS3 Generated and Replaced Content Module." According to this document, generated content is not allowed inside replaced elements. This explains the failure of :before styling on the SVG in the example.

A Possible Solution: The :outside Pseudo-Element

While generated content is not supported within replaced elements, the W3C document cited suggests a solution: the :outside pseudo-element. This pseudo-element places generated content outside the replaced element, effectively bypassing the restriction. Unfortunately, support for :outside is currently limited.

Conclusion

Styling inline SVG using :before or :after is not possible due to the limitations imposed on replaced elements. To address this issue, explore alternative methods such as using classes or attributes to dynamically add elements with desired styling.

The above is the detailed content of Why Doesn\'t CSS `:before` Work on Inline SVG Elements?. For more information, please follow other related articles on the PHP Chinese website!