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

Question

这是我最近的一个问题: 是否可以使用伪元素使包含元素环绕一个绝对定位的元素(如clearfix)？

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

我正在尝试使用伪元素来"清除"绝对定位的图像.我已经得到了相同的图像显示在幻灯片后面,但似乎无法将宽度应用于插入的图像.我是疯了,还是你不能将宽度应用于内容为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,以便它与我的幻灯片具有相同的尺寸.

Answer 1

你并不疯狂:确实无法改变使用插入的图像的尺寸content.图像始终按原样呈现.这被称为替换内容或替换元素(除了我们在这里没有讨论元素).

然而,由于替换元素可以通过调整大小width和height中描述的CSS2.1规范第10条,这引起了为什么似乎属性不适用于此问题.看起来,这个问题的答案是属性确实适用,但是对于伪元素框而言 - 你可以通过给你的伪元素一个背景颜色来看到这一点.不是替换伪元素框本身,而是将图像渲染为伪元素框的子元素,因此根本不能设置样式(因为它需要另一个不存在的伪元素).

这有助于另一个问题:它为什么不完全取代伪元素盒？不幸的是,CSS2.1根本没有指定这种行为,因此商定的实现是将内容呈现为伪元素框的子代:

CSS2.1并没有真正清楚地定义:: before和:: after上的'content'的处理模型,而是CSS 2.1中的信息示例,'content'指定事物列表的事实,以及对一致性的渴望导致UA行为如下:'content'属性指定成为:: before或:: after子元素的事物列表.

-Boris

希望这将在CSS生成内容级别3中进一步解决,重写工作刚刚开始.

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