Can I Use SVGs as Pseudo-Element Content in CSS?

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,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='100' cy='50' r='40' stroke='black' stroke-width='2' fill='red'/%3E%3Cpolyline points='20,20 40,25 60,40 80,120 120,140 200,180'>

Example HTML:

<div>

Conclusion:

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

The above is the detailed content of Can I Use SVGs as Pseudo-Element Content in CSS?. For more information, please follow other related articles on the PHP Chinese website!