Can I change the height of an image in CSS :before/:after pseudo-elements?
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.
Note that the :after
pseudo-element is a box, which in turn contains the generated image. There is no way to style the image, but you can style the box.
The following is just an idea, and the solution above is more practical.
.pdflink:after {
content: url('/images/pdf.png');
transform: scale(.5);
}
http://jsfiddle.net/Nwupm/
Drawbacks: you need to know the intrinsic dimensions of the image, and it leaves you with some whitespace, which I can't get rid of ATM.