我可以在CSS中更改图像的高度：在/之后的伪元素？
假设我想用一个图像装饰链接到某些文件types。 我可以声明我的链接为
<a href='foo.pdf' class='pdflink'>A File!</a> 然后有CSS像
.pdflink:after { content: url('http://img.dovov.compdf.png') }
现在，这个工程很好，除非pdf.png不适合我的链接文本。
我希望能够告诉浏览器缩放:after image :after ，但我不能为我的生活find正确的语法。 或者，这就像背景图像，resize是不可能的？
ETA：我倾向于a）将源图像调整为“正确”大小，服务器端和/或b）将标记更改为简单地提供IMG标签内联。 我试图避免这两件事情，但他们听起来像他们会比纯粹用CSS做东西更加兼容。 我原来的问题的答案似乎是“你可以这样做，有时候”。
调整background-size是允许的。 但是，您仍然需要指定块的宽度和高度。
.pdflink:after { background-image: url('http://img.dovov.compdf.png'); background-size: 10px 20px; display: inline-block; width: 10px; height: 20px; content:""; }
请参阅MDN上的完整兼容性表 。
注意:after伪元素之后是一个盒子，它又包含生成的图像。 没有办法设置图像的样式，但是您可以设置方框的样式。
以下只是一个想法， 上面的解决scheme更实用。
.pdflink:after { content: url('http://img.dovov.compdf.png'); transform: scale(.5); }
缺点：你需要知道图像的内在尺寸，并留下一些空白，我不能摆脱自动取款机。
由于我的另一个答案显然不是很清楚，下面是第二次尝试：
有两种方法来回答这个问题。
实用（只显示该死的照片！）
忘了:after伪select器之后，去做类似的事情
.pdflink { min-height: 20px; padding-right: 10px; background-position: right bottom; background-size: 10px 20px; background-repeat: no-repeat; }
理论
问题是：你可以风格生成内容 ？ 答案是：不，你不能。 在这个问题上， 关于W3C邮件列表已经有很长时间的讨论 ，但迄今为止还没有解决scheme。
生成的内容被渲染到一个生成的框中，您可以对该框进行样式设置，而不是像这样的内容 。 不同的浏览器显示非常不同的行为
#foo {content: url("bar.jpg"); width: 42px; height:42px;} #foo::before {content: url("bar.jpg"); width: 42px; height:42px;}Chrome调整了第一个，但第二个使用图像的固有尺寸
Firefox和即不支持第一，并使用固有的尺寸为第二
歌剧使用两种情况下的内在尺寸
（来自http://lists.w3.org/Archives/Public/www-style/2011Nov/0451.html ）
类似地，浏览器在http://jsfiddle.net/Nwupm/1/这样的东西上显示出不同的结果，其中生成了多个元素。; 请记住，CSS3还处于早期发展阶段，这个问题还有待解决。
这是另一个（工作）的解决scheme：只是调整您的图像大小，你想:)
.pdflink:after { display: block; width: 20px; height: 10px; content:url('http://img.dovov.compdf.png'); }
你需要pdf.png为20px * 10px这个工作。 在CSS中的20px / 10px是在这里给块的大小，以便块后面的元素不是都搞乱了图像
不要忘记保留原始图像的原始大小的副本
你应该使用背景而不是图像。
.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; }
.pdflink:after { background-image: url('http://img.dovov.compdf.png'); background-size: 10px 20px; width: 10px; height: 20px; padding-left: 10px;// equal to width of image. margin-left:5px;// to add some space for better look content:""; }
我用这个字体大小控制宽度
.home_footer1::after { color: transparent; background-image: url('images/icon-mail.png'); background-size: 100%; content: "......................................."; font-size: 30pt; }
您可以使用zoom属性。 检查这个jsfiddle
