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.