Can I change the height of an image in CSS :before/:after pseudo-elements?

css, pseudo-element

Solution

Adjusting the `background-size` is permitted. You still need to specify width and height of the block, however.

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

See the full Compatibility Table at the MDN.

Problem

Suppose I want to decorate links to certain file types using an image. I could declare my links as ``` <a href='foo.pdf' class='pdflink'>A File!</a> ``` then have CSS like ``` .pdflink:after { content: url('/images/pdf.png') } ``` Now, this works great, except if `pdf.png` isn't the right size for my link text. I'd like to be able to tell the browser to scale the `:after` image, but I can't for the life of me find the right syntax. Or is this like background images, where resizing just isn't possible? ETA: I'm leaning towards either a) resizing the source image to be the "right" size, server-side and/or b) changing the markup to simply supply an IMG tag inline. I was trying to avoid both those things but they sound like they'll be more compatible than trying to do stuff purely with CSS. The answer to my original question seems to be "you can sort of do it, sometimes".

Original source