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

<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的东西。我最初的问题的答案似乎是“你有时可以做到”。


当前回答

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

其他回答

现在有了flexbox,你可以大大简化你的代码,只需要调整1个参数:

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

现在你可以调整元素的宽度,高度会自动调整,增加/减少宽度,直到元素的高度是你需要的数字。

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

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

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

http://jsfiddle.net/Nwupm/

缺点:你需要知道图像的固有尺寸,它会给你留下一些空白,这是我无法摆脱的ATM。

你可以使用缩放属性。检查这个jsfiddle

content: "";
background-image: url("yourimage.jpg");
background-size: 30px, 30px;
.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:"";
}