How to put SVG inside pseudo elements in CSS?

March 4, 2021 - 1 min read

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("");

That's it! 🔥

See the above code live in JSBin

Feel free to share if you found this useful 😃.