css - 您可以将宽度应用于 :before/:after pseudo-element (content:url(image))?

Question

这是对我最近的问题的补充: Is it possible to use pseudo-elements to make containing elements wrap around an absolutely-positioned element (like a clearfix)?

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

我正在尝试使用伪元素来“clearfix”绝对定位的图像。我已经尽可能地让相同的图像显示在幻灯片后面，但似乎无法将宽度应用于插入的图像。我是不是疯了，或者你不能将宽度应用于内容为 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 渐变。图像始终按原样呈现。这称为替换内容，或 replaced element (除非我们在这里不谈论元素)。

但是，由于替换元素可以使用width 和height 调整大小，如section 10 of the CSS2.1 spec 中所述。 ，这提出了为什么这些属性似乎不适用于此处的问题。答案似乎是，这些属性确实适用，但适用于伪元素框 — 您可以通过为伪元素设置背景色来查看这一点。图像不是替换伪元素框本身，而是呈现为伪元素框的子，因此根本无法设置样式(因为它需要另一个伪元素不存在)。

这又引出了另一个问题:为什么它不完全取代伪元素框？不幸的是，CSS2.1 根本没有指定这种行为，所以 the implementation that was agreed on is to render the content as a child of the pseudo-element box instead :

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 list of 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

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

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