Home >Web Front-end >CSS Tutorial >How Can I Use SVGs within CSS Pseudo-elements?

How Can I Use SVGs within CSS Pseudo-elements?

Susan Sarandon
Susan SarandonOriginal
2024-12-09 15:53:14181browse

How Can I Use SVGs within CSS Pseudo-elements?

Incorporating SVGs into Pseudo Elements: A CSS Content Property Solution

It's possible to use SVG images as the content of pseudo elements by referencing the SVG file using the url() function:

#mydiv::before {
  content: url(path/to/your.svg);
  display: block;
  width: 22px;
  height: 10px;
  margin: 10px 5px 0 10px;
}

Alternatively, you can insert the SVG directly into the CSS using the data URI:

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

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

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn