小开

最佳答案

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

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

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

小开

注意，:after伪元素是一个方框，其中包含生成的图像。没有办法设置图像的样式，但可以设置方框的样式。

下面只是一个想法，以上解决方案更实用。

.pdflink:after {
content: url('/images/pdf.png');
transform: scale(.5);
}

http://jsfiddle.net/Nwupm/

缺点:你需要知道图像的固有尺寸，它会给你留下一些空白，这是我无法摆脱的ATM。

小开

由于我的另一个答案显然没有被很好地理解，这里有第二次尝试:

有两种方法可以回答这个问题。

实用(给我看看那该死的照片!)

忘记:after伪选择器吧，选择类似于

.pdflink {
min-height: 20px;
padding-right: 10px;
background-position: right bottom;
background-size: 10px 20px;
background-repeat: no-repeat;
}

理论

问题是:你能设置生成的内容的样式吗?答案是:不，你不能。在这个问题上有一个关于W3C邮件列表的冗长讨论，但到目前为止没有解决方案。

生成的内容被呈现到一个生成的框中，并且您可以对该框设置样式，但是而不是内容本身。不同的浏览器显示出非常不同的行为

#foo         {content: url("bar.jpg"); width: 42px; height:42px;}
#foo::before {content: url("bar.jpg"); width: 42px; height:42px;}
Chrome调整第一个的大小，但使用图像的固有尺寸对于第二个

firefox和ie不支持第一个，并使用内在维度第二个< / p >
Opera对这两种情况都使用了内在维度

(from http://lists.w3.org/Archives/Public/www-style/2011Nov/0451.html)

类似地，浏览器在http://jsfiddle.net/Nwupm/1/上显示非常不同的结果，其中生成了多个元素。请记住，CSS3仍处于早期开发阶段，这个问题还没有解决。

小开

这里是另一个(工作)解决方案:只是调整你的图像到你想要的大小:)

.pdflink:after {
display: block;
width: 20px;
height: 10px;
content:url('/images/pdf.png');
}

你需要pdf.png为20px * 10px这工作。 css中的20px/10px在这里给出块的大小，以便块之后的元素不会与图像

混淆

不要忘记保留原始图像的原始大小的副本

小开

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

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

小开

.pdflink:after {
background-image: url('/images/pdf.png');
background-size: 10px 20px;
width: 10px;
height: 20px;
padding-left: 10px;// equal to width of image.
margin-left:5px;// to add some space for better look
content:"";
}

小开

你可以使用zoom属性。检查这jsfiddle

小开

你应该使用背景而不是图像。

.pdflink:after {
content: "";
background-image:url(your-image-url.png);
background-size: 100% 100%;
display: inline-block;


/*size of your image*/
height: 25px;
width:25px;


/*if you want to change the position you can use margins or:*/
position:relative;
top:5px;


}

小开

现在有了flexbox，你可以大大简化你的代码，只需要调整1个参数:

.pdflink:after {
content: url('/images/pdf.png');
display: inline-flex;
width: 10px;
}

现在你可以调整元素的宽度，高度会自动调整，增加/减少宽度，直到元素的高度是你需要的数字。

小开

你可以像这样改变之前还是之后元素的高度或宽度:

.element:after {
display: block;
content: url('your-image.png');
height: 50px; //add any value you need for height or width
width: 50px;
}

小开

diplay: block;没有任何影响

根据前端的基本原理，Positionin也会非常奇怪，所以要小心

body:before{
content:url(https://i.imgur.com/LJvMTyw.png);
transform: scale(.3);
position: fixed;
left: 50%;
top: -6%;
background: white;
}

小开

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

小开

您可以设置元素本身的宽度和高度，而不是设置背景图像的宽度和高度。

.pdflink::after {
content: '';
background-image: url(/images/pdf.png);
width: 100px;
height: 100px;
background-size: contain;
}

小开

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

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

colnav只是我的容器类，它包含一个<UL祝辞和& lt;李比;一套标签附一套<里面有个侍者。

下面是代码(完整)

.colnav li.nexus-button a:hover:before {
background-image: url('/images/fleur-de-lis.png');
background-size: 90px 20px;
background-repeat: no-repeat;
width: 130px;
height: 20px;
margin-left: -120px;
margin-top: -3px;
transform: scale(1.5);
content: "";
position: absolute;
}

图像文件是(是)120 x 80，而图片被减少到90x 20，然后它非常适合后面的html href标签，这一切都与位置:绝对的语句在末尾。

我可以改变一个图像的高度在CSS:之前/:之后伪元素?

实用(给我看看那该死的照片!)

理论