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

Posted 2023-03-05

【中文标题】你可以对 :before/:after 伪元素 (content:url(image)) 应用宽度吗？

【英文标题】：Can you apply a width to a :before/:after pseudo-element (content:url(image))?

【发布时间】：2013-02-05 09:25:24

【问题描述】：

这是对我最近的问题的补充： 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/

我正在尝试使用伪元素来“清除”绝对定位的图像。我已经尽可能地将相同的图像显示在幻灯片后面，但似乎无法将宽度应用于插入的图像。我疯了吗，或者你不能对内容为内容的伪元素应用宽度：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，使其具有与我的幻灯片相同的尺寸。

【问题讨论】：

为什么不在伪容器中调用你的图片作为背景呢？这样您就可以使用background-size:100% 和您的伪容器来控制其尺寸width:100%; max-width:800px。

我会努力的。伪容器会在哪里得到它的尺寸呢？ @otinanai

我需要伪元素来保持与它后面的幻灯片相同的尺寸:(

容器倒塌了...

【参考方案1】：

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

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

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

CSS2.1 并没有真正明确定义 ::before 和 ::after 上 'content' 的处理模型，但是 CSS 2.1 中的信息示例，'content' 指定了一个 list em> 的事物，并且对一致性的渴望导致 UA 行为如下：'content' 属性指定成为 ::before 或 ::after 框的子项的事物列表。

-鲍里斯

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

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

【讨论】：

你不知道，如果这个限制记录在任何地方吗？我找不到它here

@user3790069：不，我也找不到。那就是问题所在。我有一个可能的解释，但我想我会建议它以 www-style 看看我是否正确，如果是，我会更新我的答案。

该主题的最佳答案！

【参考方案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;

Demonstration here.

【参考方案3】：

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

【讨论】：

但是，您似乎需要为您的伪元素设置一个特定的高度。

它确实缩小了图像显示，但是它失去了将元素向下推的能力......我想我只是在这里寻找星星以解决绝对定位困境的解决方案。跨度>

如果你为伪元素设置height，它会将另一个元素向下推。