Suppose I want to decorate links to certain file types using an image. I could declare my links as
<a href="https://stackoverflow.com/questions/8977957/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”.
