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

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.

---

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.

链接地址: http://www.djcxy.com/p/88396.html

上一篇: 将内联元素的最后一行用作伪元素之后的宽度

下一篇: 我可以在CSS中更改图像的高度：之前/：伪之后