Using SVGs as Pseudo-Element Content

The CSS content property allows for various types of content to be inserted before or after an element using pseudo-elements such as ::before and ::after. However, there have been restrictions on what content can be included.

Can SVGs be Used as Pseudo-Element Content?

Yes, it is now possible to use SVGs as content for pseudo-elements.

How to Use SVGs as Pseudo-Element Content

There are two methods to insert SVGs as pseudo-element content:

1. Using a URL:

#test::before {
  content: url(path/to/your.svg);
  /* ... other styles */
}

2. Embedding SVG in CSS:

#test::before {
  content: url("data:image/svg xml,

Example HTML:

Conclusion:
Using SVGs as pseudo-element content provides flexibility and allows for more visually appealing elements by incorporating vector graphics.