Filed under: CSS
If you want to add an image before or after an html element, you most often use the pseudo-elements :after and :before. For example, when you want to add an image before a link, you can write it like this:
But you can’t control the width or height of this image this way. If it is absolutely necessary for you to control the dimensions of this pseudo element, the following is what you do:
- Move the image to the background image property.
- Define the height and width of the pseudo element. These are the dimensions of the image.
- Make the content an empty string.
- Give the background-size the same dimensions as the image.
This is how you would do it in CSS:
background-size: 40px 40px;
No comment yet, add your voice below!