你能否给: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%，最大宽度设置为800像素，以使其与我的幻灯片具有相同的尺寸。

- Derek Foulk

---

为什么不把您的图像称为伪容器中的背景呢？这样，您就可以使用background-size:100%来控制它的尺寸，并将您的伪容器设置为 width:100%; max-width:800px。 - otinanai

我会尝试。但是伪容器的尺寸从哪里获取呢？@otinanai - Derek Foulk

我需要伪元素保持与其背后放置的幻灯片相同的尺寸:( - Derek Foulk

容器崩溃了... - Derek Foulk

Answer 1

你没有疯，确实无法更改使用content插入的图像的尺寸，无论是使用url()，image()，image-set()，element()或CSS渐变来插入。该图像始终按原样呈现。这被称为替换内容，或替换元素（除了我们这里不谈元素）。

然而，由于替换元素可以使用 CSS2.1规范第10节 中描述的 width 和 height 进行调整大小，这就引发了一个问题，为什么这些属性似乎不适用于此处。看起来答案是这些属性确实适用，但是作用在伪元素框上 —— 通过给您的伪元素设置背景颜色，您可以看到这一点。图片并没有替换伪元素框本身，而是作为伪元素框的 子元素 渲染，因此无法进行样式化（因为需要另一个不存在的伪元素）。

这也引出了另一个问题：为什么它不完全替换伪元素框呢？不幸的是，CSS2.1根本没有指定这种行为，所以 达成的共识是将内容作为伪元素框的子元素进行渲染：

CSS2.1并没有清晰地定义'::before'和'::after'中'content'的处理模型，但CSS 2.1中的信息性示例、'content'指定一个事物列表以及对一致性的追求导致UA的行为如下：'content'属性指定的事物列表成为'::before'或'::after'框的子级。

希望在CSS Generated Content level 3中进一步解决这个问题，目前正在进行重写工作。

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

- BoltClock

---

你不知道，是否偶然间有记录这个限制的地方？我在这里找不到。 - user3790069

@user3790069：不，我也找不到。这就是问题所在。我有一个可能的解释，但我想向www-style提出并查看是否正确，如果是的话，我会更新我的答案。 - BoltClock

该主题的最佳答案！ - krulik

Answer 2

你可以使用 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;
}

这里演示。

- nHaskins

---

在Firefox中可以工作，但在Chrome中无法工作。 - Jeow Li Huan

Answer 3

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

- otinanai

---

然而，看起来你需要为你的伪元素指定一个特定的高度。 - otinanai

它确实缩小了图像显示，但失去了将元素向下推的能力... 我想我只是在为绝对定位的困境寻找一个解决方案而努力。 - Derek Foulk

如果你为伪元素设置一个“height”属性，它会将其他元素向下推。 - otinanai