Can You Control the Height of Images Inside CSS Pseudo-elements?

Modifying Image Height in CSS Pseudo-Elements: Is It Possible?

Altering the height of an image contained within a CSS pseudo-element (:before/:after) can be challenging but not impossible. By default, resizing the image is not directly supported with CSS.

To achieve the desired scaling, consider the following approaches:

1. Adjust Background-Size:

For :after pseudo-elements, adjust the background-size property. However, ensure you specify the width and height of the block element containing the image using the width and height properties.

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

Compatibility:

Be mindful of browser compatibility when using this method. Refer to the comprehensive Compatibility Table at MDN for more information.

2. Resizing Source Image:

Alternatively, consider resizing the original image to the appropriate size server-side before using it in the CSS. This ensures the image will display at the desired dimensions without relying on browser scaling.

3. Inline IMG Tag:

For a more straightforward approach, incorporate an inline tag alongside the CSS pseudo-element. This approach guarantees the image will render at the specified size, but deviates from the initial goal of minimizing markup.

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