Can CSS Pseudo-Elements Like `:before` Be Used with Inline SVGs?

CSS Pseudo-Elements on Inline SVG

Inserting content into an inline SVG element using CSS pseudo-elements like :before is not straightforward. This is because inline SVGs are classified as replaced elements, which are specifically excluded from receiving generated content.

The exact behavior of :before and similar pseudo-elements on replaced elements is not clearly defined in the CSS specifications. However, it is widely accepted that generated content cannot be applied directly to images, embedded documents, and applets, which include inline SVGs.

This limitation stems from the fact that replaced elements are disconnected from the document flow. They do not participate in the formatting and layout processes, and their content is treated as a unit. As such, attempting to append generated content within a replaced element often results in unexpected or inconsistent outcomes.

Despite the lack of support for :before on inline SVGs, some workarounds may be possible. For instance, one can create an external SVG file and insert it into the HTML document using the

Another approach is to use CSS to manipulate the styling of the SVG itself. For instance, one can use :nth-of-type selectors to target specific SVG elements and apply styles to them. Although this method doesn't directly add generated content, it allows for more fine-grained control over the appearance of the SVG.

It's worth noting that future versions of CSS may introduce new features or clarifications regarding the use of pseudo-elements on replaced elements. Until then, developers should be aware of the limitations and explore alternative solutions for styling inline SVGs.

The above is the detailed content of Can CSS Pseudo-Elements Like `:before` Be Used with Inline SVGs?. For more information, please follow other related articles on the PHP Chinese website!