Advertisement
Advertisement


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


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

2012/01/23
1
255
1/23/2012 9:09:42 PM

Accepted Answer

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.

2016/02/13
384
2/13/2016 5:03:21 PM

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.

2017/05/23

Since my other answer was obviously not well understood, here's a second attempt:

There's two approaches to answer the question.

Practical (just show me the goddamn picture!)

Forget about the :after pseudo-selector, and go for something like

.pdflink {
    min-height: 20px;
    padding-right: 10px;
    background-position: right bottom;
    background-size: 10px 20px;
    background-repeat: no-repeat;
}

Theoretical

The question is: Can you style generated content? The answer is: No, you can't. There's been a lengthy discussion on the W3C mailing list on this issue, but no solution so far.

Generated content is rendered into a generated box, and you can style that box, but not the content as such. Different browsers show very different behaviour

#foo         {content: url("bar.jpg"); width: 42px; height:42px;}  
#foo::before {content: url("bar.jpg"); width: 42px; height:42px;}

Chrome resizes the first one, but uses the intrinsic dimensions of the image for the second

firefox and ie don't support the first, and use intrinsic dimensions for the second

opera uses intrinsic dimensions for both cases

(from http://lists.w3.org/Archives/Public/www-style/2011Nov/0451.html )

Similarly, browsers show very different results on things like http://jsfiddle.net/Nwupm/1/ , where more than one element is generated. Keep in mind that CSS3 is still in early development stage, and this issue has yet to be solved.

2012/01/24

You should use background instead of image.

.pdflink:after {
  content: "";
  background-image:url(your-image-url.png);
  background-size: 100% 100%;
  display: inline-block;

  /*size of your image*/
  height: 25px;
  width:25px;

  /*if you want to change the position you can use margins or:*/
  position:relative;
  top:5px;

}
2016/11/22

diplay: block; have no any effect

positionin also works very strange accodringly to frontend foundamentals, so be careful

body:before{ 
    content:url(https://i.imgur.com/LJvMTyw.png);
    transform: scale(.3);
    position: fixed;
    left: 50%;
    top: -6%;
    background: white;
}
2019/02/24

Here is another (working) solution : just resize your images to the size you want :)

.pdflink:after {
    display: block;
    width: 20px;
    height: 10px;
    content:url('/images/pdf.png');
}

you need pdf.png to be 20px * 10px for this to work. The 20px/10px in the css are here to give the size of the block so that the elements that come after the block are not all messed up with the image

Don't forget to keep a copy of the raw image in its original size

2017/09/19

Source: https://stackoverflow.com/questions/8977957
Licensed under: CC-BY-SA with attribution
Not affiliated with: Stack Overflow
Email: [email protected]