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

Question

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

Answer 1

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

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

例如，考虑以下 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;
}

Answer 2

I know this question is fairly old, but I stumbled on it today. According to http://www.w3.org/TR/CSS21/generate.html, the accepted answer isn't accurate:

The :before and :after pseudo-elements inherit any inheritable properties from the element in the document tree to which they are attached.

I just tried inheriting width and it worked.

Answer 3

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

有这个：

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

和这个转换frame：

transform: rotate(10deg);

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

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

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

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

Answer 4

如果你想使用你的::before伪元素来实现背景 ，诀窍是确保你定位了你的元素absolute和他的 parent 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%;
            
        }
}