您可以将宽度应用于 :before/:after 伪元素 (content:url(image)) 吗？

Question

这是我最近的问题的补充： 是否可以使用伪元素使包含元素环绕绝对定位的元素（如 clearfix）？

JSFiddle： http : //jsfiddle.net/derekmx271/T7A7M/

我正在尝试使用伪元素来“清除”绝对定位的图像。 我已经在幻灯片后面显示相同的图像，但似乎无法将宽度应用于插入的图像。 我疯了，还是不能将宽度应用于内容为 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;
}

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

Answer 1

你不是疯了：确实不可能改变使用content插入的图像的尺寸，无论是使用url() 、 image() 、 image-set() 、 element()还是 CSS 渐变插入. 图像始终按原样呈现。 这被称为替换内容或替换元素（除非我们在这里不讨论元素）。

但是，由于可以使用CSS2.1 规范第 10 节中所述的width和height来调整替换元素的大小，这就提出了一个问题，即为什么这些属性似乎不适用于此处。 答案似乎是这些属性确实适用，但适用于伪元素框- 您可以通过为伪元素指定背景颜色来看到这一点。 图像不是替换伪元素框本身，而是作为伪元素框的子元素呈现，因此根本无法设置样式（因为它需要另一个不存在的伪元素）。

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

CSS2.1并不真正清楚::前后定义对“内容”的::处理模型，但是在CSS 2.1翔实的例子，事实上，“内容”指定的事情的清单，以及一致性的愿望导致 UA 行为如下：“内容”属性指定成为 ::before 或 ::after 框的子项的事物列表。

-鲍里斯

希望这将在 CSS Generated Content level 3 中得到进一步解决，重写工作才刚刚开始。

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

Answer 2

看看使用background-image的演示： http : //jsfiddle.net/T7A7M/12/

Answer 3

您可以通过使用display: flex并将flex-direction设置为您希望设置的维度的相反轴来设置宽度或高度，但不能同时设置两者。

例如：

.setWidth::before {
    content: url("myImg.png")
    display: flex;
    flex-direction: column;
    width: 200px;
}

.setHeight::before {
    content: url("myImg.png")
    display: flex;
    flex-direction: row;
    height: 200px;
}

演示在这里。