假设我想使用图像来修饰某些文件类型的链接。 我可以将我的链接声明为

<a href='foo.pdf' class='pdflink'>A File!</a>

然后有CSS一样

.pdflink:after { content: url('/images/pdf.png') }

现在，这个工程很好，除非pdf.png不适合我的链接文本。

我希望能够告诉浏览器缩放:after image :after ，但我不能为我的生活找到正确的语法。 或者，这就像背景图片那样，调整大小是不可能的？

ETA：我倾向于a）将源图像调整为“正确”大小，服务器端和/或b）将标记更改为仅提供IMG标记。 我试图避免这两件事，但他们听起来似乎比纯粹用CSS做东西更加兼容。 我原来的问题的答案似乎是“有时候你可以这样做”。

---

调整background-size是允许的。 不过，您仍然需要指定块的宽度和高度。

.pdflink:after {
    background-image: url('/images/pdf.png');
    background-size: 10px 20px;
    display: inline-block;
    width: 10px; 
    height: 20px;
    content:"";
}

请参阅MDN上的完整兼容性表。

---

请注意:after伪元素之后是一个框，其中包含生成的图像。 没有办法设置图像的样式，但是您可以设置该框的样式。

以下只是一个想法，上面的解决方案更实用。

.pdflink:after {
    content: url('/images/pdf.png');
    transform: scale(.5);
}

http://jsfiddle.net/Nwupm/

缺点：你需要知道图像的内在尺寸，它留下一些空白，我不能摆脱自动取款机。

---

由于我的其他答案显然不是很好理解，所以这是第二次尝试：

有两种方法可以回答这个问题。

实用（只是告诉我该死的照片！）

忘掉:after伪选择器之后，去做类似的事情

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

理论

问题是：你可以设计生成的内容吗？ 答案是：不，你不能。 在这个问题上关于W3C邮件列表的讨论很长，但迄今为止还没有解决方案。

生成的内容被渲染到生成的框中，您可以对该框进行样式设置，而不是像这样的内容。 不同的浏览器显示非常不同的行为

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

Chrome调整了第一个，但第二个使用了图​​像的固有尺寸

Firefox和ie不支持第一个，并使用第二个固有尺寸

歌剧使用两种情况下的内在尺寸

（来自http://lists.w3.org/Archives/Public/www-style/2011Nov/0451.html）

类似地，浏览器在诸如http://jsfiddle.net/Nwupm/1/之类的东西上显示出非常不同的结果，其中生成了多个元素。 请记住，CSS3还处于早期开发阶段，这个问题还有待解决。

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

上一篇: Can I change the height of an image in CSS :before/:after pseudo

下一篇: Forcing IE8 to rerender/repaint :before/:after pseudo elements