How to put SVG inside pseudo elements in CSS?

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

Feel free to share if you found this useful 😃.