假设我想用图像装饰指向某些文件类型的链接。我可以声明我的链接为
<a href='foo.pdf' class='pdflink'>A File!</a>
然后有CSS
.pdflink:after { content: url('/images/pdf.png') }
现在，这工作得很好，除非pdf.png的大小不适合我的链接文本。
我希望能够告诉浏览器缩放:after图像，但我无法找到正确的语法。或者这就像背景图像一样，无法调整大小?
ETA:我倾向于a)将源图像大小调整为“正确的”大小，服务器端和/或b)更改标记，简单地内联提供IMG标记。我试图避免这两件事，但他们听起来会更兼容，而不是试图做纯粹的CSS的东西。我最初的问题的答案似乎是“你有时可以做到”。
当前回答
现在有了flexbox，你可以大大简化你的代码，只需要调整1个参数:
.pdflink:after {
content: url('/images/pdf.png');
display: inline-flex;
width: 10px;
}
现在你可以调整元素的宽度，高度会自动调整，增加/减少宽度，直到元素的高度是你需要的数字。
其他回答
由于我的另一个答案显然没有被很好地理解，这里有第二次尝试:
有两种方法可以回答这个问题。
实用(给我看看那该死的照片!)
忘掉:后面的伪选择器吧，找一些像
.pdflink {
min-height: 20px;
padding-right: 10px;
background-position: right bottom;
background-size: 10px 20px;
background-repeat: no-repeat;
}
理论
问题是:你能对生成的内容进行样式化吗?答案是:不，你不能。关于这个问题，W3C邮件列表上已经进行了长时间的讨论，但到目前为止还没有解决方案。
生成的内容呈现到生成的框中，您可以设置该框的样式，但不能设置内容的样式。不同的浏览器显示出非常不同的行为
#foo{内容:url("bar.jpg");宽度:42 px;高度:42 px;} #foo::before {content: url("bar.jpg");宽度:42 px;高度:42 px;} Chrome浏览器调整了第一个的大小，但使用了图像的固有尺寸 第二点 Firefox和ie不支持第一种方法，而使用了固有维度 第二个 Opera对这两种情况都使用了内在维度
(来自http://lists.w3.org/Archives/Public/www-style/2011Nov/0451.html)
类似地，浏览器在http://jsfiddle.net/Nwupm/1/(生成了多个元素)上显示的结果也非常不同。请记住，CSS3仍处于早期开发阶段，这个问题还没有解决。
您可以设置元素本身的宽度和高度，而不是设置背景图像的宽度和高度。
.pdflink::after {
content: '';
background-image: url(/images/pdf.png);
width: 100px;
height: 100px;
background-size: contain;
}
你应该使用背景而不是图像。
.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;
}
是的，最初的问题是八年前提出的，但它实际上与今天有关，因为它一直都是。现在，关于这个问题，我已经从一个柱子到一个柱子，大约一个星期了::之后，它把我逼疯了。
从这个页面，以及其他关于这个主题的页面，我终于把它放在一起，并在伪标签中缩小了图像的大小。
colnav只是我的容器类，它拥有一个< UL >和< LI >的标签集，里面有一组< a hrefs。
下面是代码(完整)
.colnav李。连接按钮a:悬停:前{ 背景图片:url(/图片/ fleur-de-lis.png); Background-size: 90px 20px; 平铺方式:不再重演; 宽度:130 px; 高度:20 px; margin-left: -120 px; margin-top: 3 px; 变换:规模(1.5); 内容:“”; 位置:绝对的; ｝
图像文件是120 x 80，而图片被压缩到90x 20，然后它非常适合html href标签后面，所有这些都与最后的绝对语句位置结合在一起。
现在有了flexbox，你可以大大简化你的代码，只需要调整1个参数:
.pdflink:after {
content: url('/images/pdf.png');
display: inline-flex;
width: 10px;
}
现在你可以调整元素的宽度，高度会自动调整，增加/减少宽度，直到元素的高度是你需要的数字。
