Question

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”.

Answer 1

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.