Can I Use SVG Images as Content in CSS Pseudo-elements?

Displaying SVG as Content in Pseudo-Elements

In CSS, pseudo-elements such as ::before and ::after can enhance element appearance by adding content before or after it. While text content is commonly used, is it possible to display an SVG image as content within these pseudo-elements?

To achieve this, specify the SVG image's URL as the content value for the pseudo-element. For instance:

#test::before {
  content: url(path/to/your.svg);
  width: 200px;
  height: 200px;
}

Alternatively, you can embed the SVG directly within the CSS using the data:image/svg xml syntax:

#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'>

This technique allows you to incorporate complex SVG graphics into your web pages using the power of CSS.

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