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

假设我想用一个图像装饰指向特定文件类型的链接。我可以将我的链接声明为

<a href='https://stackoverflow.com/questions/8977957/10〕https://stackoverflow.com/questions/8977957/foo.pdf“class='pdflink'>档案&lt/a>

然后有CSS之类的

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

现在,这非常有效,除非pdf.png的大小不适合我的链接文本

我希望能够告诉浏览器缩放:之后的图像,但我一生都找不到正确的语法。或者这就像背景图像一样,无法调整大小

ETA:我倾向于a)将源图像的大小调整为“正确”的大小,服务器端和/或b)更改标记以仅内联提供IMG标记。我试图避免这两件事,但它们听起来比单纯使用CSS更兼容。我最初的问题的答案似乎是“你可以某种程度上做它,有时”

允许调整背景大小。但是,仍然需要指定块的宽度和高度

.pdflink:after{
背景图片:url('/images/pdf.png');
背景尺寸:10px 20px;
显示:内联块;
宽度:10px;
高度:20px;
内容:“;
}

请参阅MDN上的完整兼容性表

发表评论