我可以在CSS：before /：after伪元素中更改图像的高度吗？

一尘不染

我可以在CSS：before /：after伪元素中更改图像的高度吗？

css

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

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

阅读 450

2020-05-16

共1个答案

一尘不染

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

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

2020-05-16