您可以对：before /：after伪元素（content：url（image））应用宽度吗？

Question

这是我最近的问题的补充：是否可以使用伪元素来使包含元素包裹在绝对定位的元素周围（如clearfix）？
我正在尝试使用伪元素来“清除”绝对定位的图像。我已经尽力使相同的图像显示在幻灯片后面，但似乎无法对插入的图像应用宽度。我疯了吗，还是不能将宽度应用于内容为url（img/image.jpg）的伪元素？我尝试了display：block等的各种变化，但无济于事…

#slider ul:after {
  content: url(http://www.cs7tutorials.com/img/slide1.jpg);
  display: block;
  position:relative;
  width:70px;
}

我需要将伪元素图像的宽度设置为100％，将最大宽度设置为800px，以使其具有与幻灯片相同的尺寸。

Answer 1

您并不疯狂：确实不可能更改使用插入的图像的尺寸content。图像始终按原样渲染。这称为替换内容或[替换元素（除非我们在这里不讨论元素）。

然而，由于替换元素 可以
通过调整大小width和height中所述的CSS2.1规范第10条，这引起了为什么似乎属性不适用于此问题。答案似乎是，属性确实适用，但适用于_伪元素框_ -您可以通过为伪元素赋予背景色来看到这一点。图像不会代替伪元素框本身，而是呈现为伪元素框的 子
元素，因此根本无法样式化（因为这将需要另一个不存在的伪元素）。

这就引出了另一个问题：为什么它不完全取代伪元素框？不幸的是，CSS2.1根本没有指定此行为，因此，已达成共识的实现是将内容呈现为伪元素框的子元素

CSS2.1并没有真正明确html" target="_blank">定义:: before和:: after上“ content”的处理模型，但是CSS 2.1中的信息示例，“
content”指定了事物 列表 以及对一致性的渴望导致UA行为如下：’content’属性指定了成为:: before或::
after框的子级的事物的列表。

希望这将在CSS生成的内容级别3中得到进一步解决，该级别的重写工作才刚刚开始。

同时，如果您希望能够调整:after伪元素和生成的图像的大小，则需要将其作为背景图像应用，并且（假设没有浏览器支持）将其background-size与width和一起使用并height缩放（基于这些属性改为应用于伪元素框的理解）。