How to Scale Images in CSS :before/:after Pseudo-Elements?

Scaling Images in CSS :before/:after Pseudo-Elements

Decorating links with images using pseudo-elements offers enhanced visual appeal. However, when the image dimensions do not align with the link text, the need arises to modify the image height.

Syntax for Image Height Scaling

Unlike background images, pseudo-element images can be scaled using the background-size property. However, this requires specifying the width and height of the containing block.

The corrected CSS would be:

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

In this code:

• background-size: 10px 20px; scales the image to 10px width and 20px height.
• display: inline-block; ensures the pseudo-element behaves as an inline element.
• width: 10px; height: 20px; define the dimensions of the containing block.
• content: ""; hides any default content in the pseudo-element.

Compatibility

Refer to the MDN Compatibility Table for support details across various browsers.

The above is the detailed content of How to Scale Images in CSS :before/:after Pseudo-Elements?. For more information, please follow other related articles on the PHP Chinese website!