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".
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:"";
}