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

<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做事更具兼容性。答案我原来的问题似乎是“你可以排序的做到这一点，有时”。

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/

缺点：您需要了解图像的内在尺寸，它给您留了一些空白，这是我无法摆脱的ATM。

由于我的其他答案显然没有被很好地理解，因此这是第二次尝试：

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

实用（只给我看该死的照片！）

忘记: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和，即不支持第一个，而对第二个使用固有尺寸

歌剧在两种情况下都使用固有维度

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

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

您应该使用背景而不是图像。

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

}

diplay: block; 没有任何作用

根据前端基础知识，positionin也很奇怪，所以要小心

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

这是另一个（有效的）解决方案：只需将图像调整为所需的大小即可：）

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

您需要pdf.png为20px * 10px才能正常工作。css中的20px / 10px用于给出块的大小，以使块之后的元素不会全部被图像弄乱。

不要忘记将原始图像的副本保留为原始大小

.pdflink:after {
    background-image: url('/images/pdf.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:"";
}

您可以使用该zoom属性。检查这个jsfiddle

您可以像这样更改Before或After元素的高度或宽度：

.element:after {
  display: block;
  content: url('your-image.png');
  height: 50px; //add any value you need for height or width
  width: 50px;
}

我用这个字体大小控制宽度

.home_footer1::after {
color: transparent;
background-image: url('images/icon-mail.png');      
background-size: 100%;      
content: ".......................................";
font-size: 30pt;
}

如今，使用flexbox可以极大地简化代码，并且仅根据需要调整1个参数：

.pdflink:after {
    content: url('/images/pdf.png');
    display: inline-flex;
    width: 10px;
}

现在，您只需调整元素的宽度，高度就会自动调整，增加/减小宽度，直到元素的高度达到所需的数量为止。

content: "";
background-image: url("yourimage.jpg");
background-size: 30px, 30px;