这是我最近的问题的补充：是否可以使用伪元素使包含元素环绕绝对定位元素（如clearfix）？ https://stackoverflow.com/questions/14977324/is-it-possible-to-use-pseudo-elements-to-make-containing-elements-wrap-around-an
JSFiddle：http://jsfiddle.net/derekmx271/T7A7M/ http://jsfiddle.net/derekmx271/T7A7M/
我正在尝试使用伪元素来“clearfix”绝对定位的图像。我已经尽可能在幻灯片后面显示相同的图像，但似乎无法将宽度应用于插入的图像。我疯了吗，或者你不能将宽度应用于内容为 content: url(img/image.jpg) 的伪元素吗？我尝试了不同的显示：块等变体，但无济于事......
#slider ul:after {
content: url(http://www.cs7tutorials.com/img/slide1.jpg);
display: block;
position:relative;
width:70px;
}
我需要将伪元素图像的宽度设置为 100%，最大宽度设置为 800px，以便它与我的幻灯片具有相同的尺寸。
你没疯：确实不可能改变使用插入的图像的尺寸content，是否插入url(), image(), image-set(), element()，或 CSS 渐变。图像始终按原样渲染。这称为替换内容，或被替换的元素 http://www.w3.org/TR/CSS21/conform.html#replaced-element（除了我们这里不讨论元素）。
然而，由于更换了元素can使用调整大小width and height如中所述CSS2.1 规范第 10 节 http://www.w3.org/TR/CSS21/visudet.html，这就提出了为什么这些属性似乎不适用于这里的问题。答案似乎是，这些属性确实适用，但适用于伪元素框相反，您可以通过为伪元素指定背景颜色来看到这一点。图像不是替换伪元素框本身，而是渲染为child伪元素框，因此根本无法设置样式（因为它需要另一个不存在的伪元素）。
这就引出了另一个问题：为什么它不完全取代伪元素框？不幸的是，CSS2.1 根本没有指定这种行为，所以达成一致的实现是将内容呈现为伪元素框的子元素 http://lists.w3.org/Archives/Public/www-style/2015Feb/0383.html:
CSS2.1 并没有真正明确地定义 ::before 和 ::after 上“content”的处理模型，但是 CSS 2.1 中的信息丰富的示例表明，“content”指定了一个list事物的一致性，并且对一致性的渴望导致 UA 行为如下：“content”属性指定成为 ::before 或 ::after 框的子项的事物列表。
-Boris
希望这个问题能够在 CSS 生成内容级别 3 中得到进一步解决，该级别的重写工作才刚刚开始。
同时，如果您希望能够调整大小:after伪元素和生成的图像，您需要将其应用为背景图像，并且 - 假设浏览器支持不是问题 - 使用background-size随着width and height缩放它（基于这些属性适用于伪元素框的理解）。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
