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