我可以改变CSS中的图像的高度：before /：伪元素之后？ [英] Can I change the height of an image in CSS :before/:after pseudo-elements?

问题描述

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

Suppose I want to decorate links to certain file types using an image. I could declare my links as

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

那么就像

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

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

Now, this works great, except if pdf.png isn't the right size for my link text.

我想告诉浏览器缩放：之后的图片，但我不能为我的生活找到正确的语法。

I'd like to be able to tell the browser to scale the :after image, but I can't for the life of me find the right syntax. Or is this like background images, where resizing just isn't possible?

ETA：我倾向于a）将源图像的大小调整为右大小，服务器侧和/或b）改变标记以简单地在线提供IMG标签。我试图避免这两个事情，但他们听起来像他们会更容易兼容，而不是纯粹用CSS做。我原来的问题的答案似乎是你可以这样做，有时候。

ETA: I'm leaning towards either a) resizing the source image to be the "right" size, server-side and/or b) changing the markup to simply supply an IMG tag inline. I was trying to avoid both those things but they sound like they'll be more compatible than trying to do stuff purely with CSS. The answer to my original question seems to be "you can sort of do it, sometimes".

推荐答案

p>允许调整 background-size 。你仍然需要指定块的宽度和高度。

Adjusting the background-size is permitted. You still need to specify width and height of the block, however.

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

查看MDN的完整兼容性表。

这篇关于我可以改变CSS中的图像的高度：before /：伪元素之后？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！