How Can I Embed SVGs in CSS ::before and ::after Pseudo-elements?

Using SVGs in ::before and ::after Pseudo-Elements

It's often desired to embed SVG images as content within pseudo-elements ::before and ::after. While the plaintext version doesn't work, there are alternative solutions using URL() or inline data URI.

Using URL()

The first method involves referencing the SVG file's URL:

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

Using Data URI

Another option is to encode the SVG directly into the CSS using data URI encoding:

#mydiv::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 method allows you to embed the SVG image directly into the CSS, making it self-contained.

The above is the detailed content of How Can I Embed SVGs in CSS ::before and ::after Pseudo-elements?. For more information, please follow other related articles on the PHP Chinese website!