:before 和 :after 伪元素可以从父元素继承高度吗？

Posted 2023-03-06

【中文标题】:before 和 :after 伪元素可以从父元素继承高度吗？

【英文标题】：Can the :before and :after pseudo-elements inherit height from the parent element?

【发布时间】：2012-08-20 22:27:48

【问题描述】：

我想知道:before 和:after 伪元素是否可以使用inherit 值从父级继承高度，而不需要实际元素这样做？

【问题讨论】：

不确定您的用例，但如果您只需要 :before/:after 与父元素具有相同的高度，那么伪元素中的 height: 100% 效果很好。

【参考方案1】：

如果你想使用你的::before 伪元素来实现背景，诀窍是确保你定位你的元素absolute 和他的父元素relative。还要确保设置父级的宽度。

示例

&__item 

    position: relative;
    width: 100%;
    height: 100%;
      
        &::before 
            content: "";
            background-color: red;
            background-size: 100%;
            
            position: absolute;
            top: 0;
            left: 0;

            width: 100%;
            height: 100%;
            
        

【参考方案2】：

我知道这个问题已经很老了，但我今天偶然发现了它。根据http://www.w3.org/TR/CSS21/generate.html，接受的答案不准确：

:before 和 :after 伪元素从它们所附加到的文档树中的元素继承任何可继承的属性。

我刚刚尝试继承宽度，它奏效了。

【讨论】：

我将编辑我的答案以澄清。我认为它太短了，因此可能令人困惑。

当我提出这个问题时，我不明白::before 和::after 伪元素是如何工作的。以这种情况为例：divA > divB::after - 我的问题的目的是了解divB:after could inherit divA's properties. In my phrasing of the question: _parent element_ referred to divA` 和 实际元素 是否引用了divB。我希望我的问题是这样解释的。

感谢@BoltClock，现在更清楚了。 AKG，我认为您的问题最初被正确理解，但现在一切都更清楚了:)

【参考方案3】：

关于这些答案，我只是碰到了转型方面。它可能类似于继承；我希望它可以帮助某人。

有这个：

<div class="box">    
  <div class="frame"></div>
</div>

以及frame 的这种转换：

transform: rotate(10deg);

然后frame:before 和frame:after 也被转换。但是它们没有frame 的属性，例如width 和height，就像上面解释的那样。完整示例请参见此处：

http://jsfiddle.net/chafpgwt/1/

在这个小提琴上，有三个嵌套的正方形，每个旋转 10 度，但变换定义只为 frame 设置，而不是为 frame:after 和 frame:before。

认为转换也不是“继承的”是一个陷阱，因为其他一切都不是。这种转变在另一种情况下会产生影响。

【参考方案4】：

没有。伪元素可以从其生成元素的父级继承值的唯一方法是生成元素本身也从其父级继承。

这是因为继承发生从父级到子级，一次一个级别。为了使继承能够跨越多个后代级别，每个后代都必须继承。

例如，考虑以下 HTML：

<div class="parent">
    <div class="child">
    </div>
</div>

使用以下 CSS：

.parent 
    width: 100px;
    height: 100px;


.parent > .child:before, .parent > .child:after 
    content: '';
    position: absolute;
    width: inherit;
    height: inherit;

这不起作用，因为即使伪元素的值为inherit，生成它们的元素，即.parent > .child，也不会继承自.parent。相反，它们继承了两个属性的默认值 auto。

为了使其工作，您还需要拥有 .parent > .child 继承：

.parent 
    width: 100px;
    height: 100px;


.parent > .child 
    width: inherit;
    height: inherit;


.parent > .child:before, .parent > .child:after 
    content: '';
    position: absolute;
    width: inherit;
    height: inherit;