How to put an image inside pseudo elements in CSS?

Originally posted here!

To put an image 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 image file as a string to the function.

/* Put image in Pseudo element ✅ */
div:after {
  content: url("path-to-my-image.jpg");
}

For example, let use a real image to understand. Check out the image 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/1/1d/Football_Pallo_valmiina-cropped.jpg");
}

That's it! 🔥

See the above code live in JSBin

Feel free to share if you found this useful 😃.

---