我可以在 CSS :before/:after 伪元素中更改图像的高度吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8977957/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can I change the height of an image in CSS :before/:after pseudo-elements?
提问by Coderer
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>
then have CSS like
然后有 CSS 像
.pdflink:after { content: url('/images/pdf.png') }
Now, this works great, except if pdf.pngisn't the right size for my link text.
现在，这很好用，除非pdf.png我的链接文本大小不合适。
I'd like to be able to tell the browser to scale the :afterimage, 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?
我希望能够告诉浏览器缩放:after图像，但我一生都找不到正确的语法。或者这就像背景图像一样，无法调整大小？
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 ofdo it, sometimes".
ETA：我倾向于 a) 将源图像的大小调整为服务器端的“正确”大小和/或 b) 更改标记以简单地提供内联 IMG 标签。我试图避免这两件事，但听起来它们比尝试纯粹使用 CSS 更兼容。答案我原来的问题似乎是“你可以排序的做到这一点，有时”。
回答by Ansel Santosa
Adjusting the background-sizeis permitted. You still need to specify width and height of the block, however.
background-size允许调整。但是，您仍然需要指定块的宽度和高度。
.pdflink:after {
background-image: url('/images/pdf.png');
background-size: 10px 20px;
display: inline-block;
width: 10px;
height: 20px;
content:"";
}
回答by user123444555621
Note that the :afterpseudo-element is a box, which in turn contains the generated image. There is no way to style the image, but you can style the box.
请注意，:after伪元素是一个盒子，它又包含生成的图像。无法为图像设置样式，但您可以为框设置样式。
The following is just an idea, and the solution aboveis more practical.
.pdflink:after {
content: url('/images/pdf.png');
transform: scale(.5);
}
Drawbacks: you need to know the intrinsic dimensions of the image, and it leaves you with some whitespace, which I can't get rid of ATM.
缺点：你需要知道图像的内在尺寸，它会给你留下一些空白，我无法摆脱 ATM。
回答by user123444555621
Since my other answer was obviously not well understood, here's a second attempt:
由于我的另一个答案显然没有被很好地理解，这是第二次尝试：
There's two approaches to answer the question.
有两种方法可以回答这个问题。
Practical (just show me the goddamn picture!)
实用（给我看看该死的图片！）
Forget about the :afterpseudo-selector, and go for something like
忘记:after伪选择器，去寻找类似的东西
.pdflink {
min-height: 20px;
padding-right: 10px;
background-position: right bottom;
background-size: 10px 20px;
background-repeat: no-repeat;
}
Theoretical
理论的
The question is: Can you style generated content? The answer is: No, you can't. There's been a lengthy discussion on the W3C mailing liston this issue, but no solution so far.
问题是：你能设计生成的内容吗？答案是：不，你不能。W3C 邮件列表上对此问题进行了长时间的讨论，但到目前为止还没有解决方案。
Generated content is rendered into a generated box, and you can style that box, but not the content as such. Different browsers show very different behaviour
生成的内容被渲染到一个生成的框中，您可以设置该框的样式，但不能设置内容本身的样式。不同的浏览器表现出非常不同的行为
#foo {content: url("bar.jpg"); width: 42px; height:42px;} #foo::before {content: url("bar.jpg"); width: 42px; height:42px;}Chrome resizes the first one, but uses the intrinsic dimensions of the image for the second
firefox and ie don't support the first, and use intrinsic dimensions for the second
opera uses intrinsic dimensions for both cases
#foo {content: url("bar.jpg"); width: 42px; height:42px;} #foo::before {content: url("bar.jpg"); width: 42px; height:42px;}Chrome 会调整第一个的大小，但第二个使用图像的固有尺寸
firefox 和 ie 不支持第一个，并为第二个使用内在尺寸
歌剧在这两种情况下都使用内在维度
(from http://lists.w3.org/Archives/Public/www-style/2011Nov/0451.html)
（来自http://lists.w3.org/Archives/Public/www-style/2011Nov/0451.html）
Similarly, browsers show very different results on things like http://jsfiddle.net/Nwupm/1/, where more than one element is generated. Keep in mind that CSS3 is still in early development stage, and this issue has yet to be solved.
同样，浏览器在诸如http://jsfiddle.net/Nwupm/1/ 之类的东西上显示出非常不同的结果，其中生成了多个元素。请记住，CSS3 仍处于早期开发阶段，此问题尚未解决。
回答by Santi Nunez
You should use background instead of image.
您应该使用背景而不是图像。
.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;
}
回答by Dmytro Yurchenko
diplay: block;have no any effect
diplay: block;没有任何影响
positionin also works very strange accodringly to frontend foundamentals, so be careful
positionin 也很奇怪地根据前端基础工作，所以要小心
body:before{
content:url(https://i.imgur.com/LJvMTyw.png);
transform: scale(.3);
position: fixed;
left: 50%;
top: -6%;
background: white;
}
回答by Thomas
Here is another (working) solution : just resize your images to the size you want :)
这是另一个（工作）解决方案：只需将图像调整为您想要的大小:)
.pdflink:after {
display: block;
width: 20px;
height: 10px;
content:url('/images/pdf.png');
}
you need pdf.png to be 20px * 10px for this to work. The 20px/10px in the css are here to give the size of the block so that the elements that come after the block are not all messed up with the image
你需要 pdf.png 为 20px * 10px 才能工作。css中的20px/10px在这里给出了block的大小，这样block后面的元素就不会全部和图片搞混了
Don't forget to keep a copy of the raw image in its original size
不要忘记保留原始图像的原始大小副本
回答by Ravi Soni
.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:"";
}
回答by Plamen
You can use the zoomproperty. Check this jsfiddle
您可以使用该zoom物业。检查这个jsfiddle
回答by Nesha Zoric
You can change the height or width of the Before or Afterelement like this:
您可以像这样更改Before 或 After元素的高度或宽度：
.element:after {
display: block;
content: url('your-image.png');
height: 50px; //add any value you need for height or width
width: 50px;
}
回答by rhysclay
Nowadays with flexbox you can greatly simplify your code and only adjust 1 parameter as needed:
现在有了 flexbox，你可以大大简化你的代码，只需根据需要调整 1 个参数：
.pdflink:after {
content: url('/images/pdf.png');
display: inline-flex;
width: 10px;
}
Now you can just adjust the width of the element and the height will automatically adjust, increase/decrease the width until the height of the element is at the number you need.
现在您只需调整元素的宽度，高度就会自动调整，增加/减少宽度，直到元素的高度达到您需要的数字。
