Can CSS Pseudo-Elements Resize Images?

Can Image Height Modification Be Achieved in CSS Pseudo-Elements (:before/:after)?

In an effort to customize the appearance of specific file types, developers can incorporate images as decorative elements. By assigning a class to links, such as , CSS can be utilized to display an image afterwards:

.pdflink:after { content: url('/images/pdf.png') }

While this approach effectively adds an image to the link, resizing the image based on the link text becomes a challenge. The ability to scale images within pseudo-elements has been a long-standing question in web development.

The traditional method of resizing background images is not applicable to pseudo-elements. However, some support for image resizing can be achieved through the background-size property:

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

This approach involves adjusting the background size while explicitly defining the width and height of the surrounding block. It's important to note that compatibility is limited for this technique. The MDN Compatibility Table provides further details on browser support.

The above is the detailed content of Can CSS Pseudo-Elements Resize Images?. For more information, please follow other related articles on the PHP Chinese website!