css - 我可以在 CSS :before/:after pseudo-elements? 中更改图像的高度吗

Question

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

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

然后有像这样的CSS

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

现在，这很好用，除非 pdf.png 的大小不适合我的链接文本。

我希望能够告诉浏览器缩放 :after 图像，但我终究找不到正确的语法。或者这是否像背景图像一样，无法调整大小？

预计到达时间:我倾向于 a) 将源图像的大小调整为服务器端的“正确”大小和/或 b) 更改标记以简单地内联提供 IMG 标签。我试图避免这两件事，但它们听起来比纯粹用 CSS 做事更兼容。我最初的问题的答案似乎是“有时您可以有点这样做”。

Answer 1

调整 background-size被允许。但是，您仍然需要指定 block 的宽度和高度。

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

See the full Compatibility Table at the MDN .