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

我知道这个问题相当陈旧，但我今天偶然发现了它。根据{{3}}，接受的答案并不准确：

:before和：after伪元素从文档树中的元素继承任何可继承的属性。

我只是尝试继承宽度并且工作正常。

Answer 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。

认为变革也不是“继承”是一个陷阱，因为其他一切都不是。转型在另一种背景下具有影响力。

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

3 个答案: