Can I Control the Height of Images Within CSS :before/:after Pseudo-Elements?

Can I Adjust Image Height in CSS :before/:after Pseudo-Elements?

Your inquiry is whether it's possible to modify the height of an image used within a CSS :before/:after pseudo-element. While background images can be resized, it's not immediately clear if the same is possible for pseudo-element images.

Solution:

You can partially achieve your goal by adjusting the background-size property for the pseudo-element. However, keep in mind that you'll still need to define the width and height of the block surrounding the image:

.pdflink:after {
    background-image: url('/images/pdf.png');
    background-size: 10px 20px;
    display: inline-block;
    width: 10px;
    height: 20px;
    content: "";
}

This method allows you to control the size of the image within the specified block. However, note that the overall dimensions of the block itself will also need to be set accordingly.

Alternative Solutions:

You have expressed reservations about resizing the source image or modifying the markup to include an inline IMG tag. However, if compatibility is a priority, these options may prove more reliable than solely relying on CSS.

The above is the detailed content of Can I Control the Height of Images Within CSS :before/:after Pseudo-Elements?. For more information, please follow other related articles on the PHP Chinese website!