To put SVG as the content inside pseudo-elements like :before
and :after
, you can use the url()
function in the CSS and pass the link to the SVG file as a string to the function.
/* Put Svg in Pseudo element ✅ */
div:after {
content: url("path-to-my-svg.svg");
}
For example, let use a real SVG icon to understand. Check out the SVG which we will be using for the example.
Now in the :after
or :before
pseudo elements for a p
(paragragh) element, you can use it like this,
p:before {
content: url("https://upload.wikimedia.org/wikipedia/commons/9/99/Leo.svg");
}
That's it! 🔥
See the above code live in JSBin
Top comments (1)
What if you wanted to inline the SVG?
Such as