CSS 您可以将宽度应用于 :before/:after 伪元素 (content:url(image)) 吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14978807/
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 you apply a width to a :before/:after pseudo-element (content:url(image))?
提问by derekmx271
This is in addition to my recent question: Is it possible to use pseudo-elements to make containing elements wrap around an absolutely-positioned element (like a clearfix)?
这是我最近的问题的补充： 是否可以使用伪元素使包含元素环绕绝对定位的元素（如 clearfix）？
JSFiddle: http://jsfiddle.net/derekmx271/T7A7M/
JSFiddle：http: //jsfiddle.net/derekmx271/T7A7M/
I'm trying to use pseudo-elements to "clearfix" absolutely positioned images. I have gotten as far as getting the same image to display behind the slides, but cannot seem to apply widths to the inserted image. Am I crazy, or can you NOT apply widths to pseudo elements whose content is content: url(img/image.jpg)? I tried different variations of display:block, etc. to no avail...
我正在尝试使用伪元素来“清除”绝对定位的图像。我已经在幻灯片后面显示相同的图像，但似乎无法将宽度应用于插入的图像。我疯了，还是不能将宽度应用于内容为 content: url(img/image.jpg) 的伪元素？我尝试了 display:block 等的不同变体，但无济于事...
#slider ul:after {
content: url(http://www.cs7tutorials.com/img/slide1.jpg);
display: block;
position:relative;
width:70px;
}
I need to set the width of the pseudo-element image to 100% and the max-width to 800px, so that it has the same dimensions as my slides.
我需要将伪元素图像的宽度设置为 100%，将最大宽度设置为 800px，以便它与我的幻灯片具有相同的尺寸。
回答by BoltClock
You're not crazy: it is indeed not possible to change the dimensions of an image that is inserted using content. The image is always rendered as is. This is known as replaced content, or a replaced element(except we're not talking about elements here).
你不是疯了：确实不可能改变使用content. 图像始终按原样呈现。这被称为替换内容或替换元素（除非我们在这里不讨论元素）。
However, since replaced elements canbe resized using widthand heightas described in section 10 of the CSS2.1 spec, this raises the question of why the properties don't seem to apply here. The answer to this, it would seem, is that the properties do apply, but to the pseudo-element boxinstead — you can see this by giving your pseudo-element a background color. Rather than replacing the pseudo-element box itself, the image is rendered as a childof the pseudo-element box, and therefore cannot be styled at all (as it would require another pseudo-element which doesn't exist).
但是，由于可以使用CSS2.1 规范的第 10 节中描述的width和来调整替换元素的大小，这就提出了为什么这些属性似乎不适用于此处的问题。答案似乎是这些属性确实适用，但适用于伪元素框- 您可以通过为伪元素指定背景颜色来看到这一点。图像不是替换伪元素框本身，而是作为伪元素框的子元素呈现，因此根本无法设置样式（因为它需要另一个不存在的伪元素）。height
And that lends itself to another question: why doesn't it replace the pseudo-element box altogether? Unfortunately, CSS2.1 does not specify this behavior at all, so the implementation that was agreed on is to render the content as a child of the pseudo-element box instead:
这就引出了另一个问题：为什么它不完全替换伪元素框？不幸的是，CSS2.1 根本没有指定这种行为，因此商定的实现是将内容呈现为伪元素框的子元素：
CSS2.1 doesn't really clearly define the processing model of 'content' on ::before and ::after, but the informative examples in CSS 2.1, the fact that 'content' specifies a listof things, and the desire for consistency has led to UA behavior being the following: the 'content' property specifies a list of things that become children of the ::before or ::after box.
-Boris
CSS2.1并不真正清楚::前后定义对“内容”的::处理模型，但是在CSS 2.1翔实的例子，事实上，“内容”指定名单的事情，和一致性的愿望导致 UA 行为如下：“内容”属性指定成为 ::before 或 ::after 框的子项的事物列表。
-鲍里斯
Hopefully this will be further addressed in CSS Generated Content level 3, on which rewriting work has just begun.
希望这将在 CSS Generated Content level 3 中得到进一步解决，重写工作才刚刚开始。
In the meantime, if you want to be able to resize the :afterpseudo-element and the image that's generated, you will need to apply it as a background image instead and — assuming browser support isn't an issue — use background-sizealong with widthand heightto scale it (based on the understanding that those properties apply to the pseudo-element box instead).
同时，如果您希望能够调整:after伪元素和生成的图像的大小，则需要将其应用为背景图像，并且 - 假设浏览器支持不是问题 -background-size一起使用width和height缩放它（基于这些属性适用于伪元素框的理解）。
回答by otinanai
Have a look at the demo using background-image: http://jsfiddle.net/T7A7M/12/
看看使用的演示background-image：http: //jsfiddle.net/T7A7M/12/
