我可以改变一个图像的高度在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的东西。我最初的问题的答案似乎是“你有时可以做到”。

当前回答

是的，最初的问题是八年前提出的，但它实际上与今天有关，因为它一直都是。现在，关于这个问题，我已经从一个柱子到一个柱子，大约一个星期了::之后，它把我逼疯了。

从这个页面，以及其他关于这个主题的页面，我终于把它放在一起，并在伪标签中缩小了图像的大小。

colnav只是我的容器类，它拥有一个< UL >和< LI >的标签集，里面有一组< a hrefs。

下面是代码(完整)

.colnav李。连接按钮a:悬停:前{ 背景图片:url(/图片/ fleur-de-lis.png); Background-size: 90px 20px; 平铺方式:不再重演; 宽度:130 px; 高度:20 px; margin-left: -120 px; margin-top: 3 px; 变换:规模(1.5); 内容:“”; 位置:绝对的; ｝

图像文件是120 x 80，而图片被压缩到90x 20，然后它非常适合html href标签后面，所有这些都与最后的绝对语句位置结合在一起。

2020-11-29 17:17:22

其他回答

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

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

2014-11-05 18:41:30

允许调整背景尺寸。但是，您仍然需要指定块的宽度和高度。

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

请参见MDN上的完整兼容性表。

2012-01-23 20:19:30

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

2019-08-20 08:26:08

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

2016-02-05 15:32:38