CSS :before 和 :after 伪元素可以继承父元素的高度吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12124953/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can the :before and :after pseudo-elements inherit height from the parent element?
提问by AKG
I am wondering whether the :beforeand :afterpseudo-elements can inherit the height from parent using the inheritvalue, without the actual element doing so?
我想知道:before和:after伪元素是否可以使用该inherit值从父元素继承高度，而实际元素不这样做？
回答by BoltClock
No. The only way that pseudo-elements can inherit values from the parent of their generating element is when the generating element itself is also inheriting from its parent.
不。伪元素可以从其生成元素的父元素继承值的唯一方法是生成元素本身也从其父元素继承。
This is because inheritance occurs from a parent to a child, one level at a time. For inheritance to work across several levels of descendants, every descendant must inherit.
这是因为继承从父级到子级，一次一级。为了使继承能够跨多个级别的后代工作，每个后代都必须继承.
As an example, consider the following HTML:
例如，请考虑以下 HTML：
<div class="parent">
<div class="child">
</div>
</div>
With the following CSS:
使用以下 CSS：
.parent {
width: 100px;
height: 100px;
}
.parent > .child:before, .parent > .child:after {
content: '';
position: absolute;
width: inherit;
height: inherit;
}
This will not work because even though the pseudo-elements have values of inherit, the element generating them, that is, .parent > .child, does not inherit from .parent. Instead, they inherit the default value of autofor both properties.
这是行不通的，因为即使伪元素的值为inherit，生成它们的元素，即.parent > .child，也不会继承自.parent。相反，它们继承了auto两个属性的默认值。
In order for this to work you will need to have .parent > .childinherit as well:
为了使其工作，您还需要.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;
}
回答by joe
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:
我知道这个问题已经很老了，但我今天偶然发现了它。根据http://www.w3.org/TR/CSS21/generate.html，接受的答案不准确：
The
:beforeand :after pseudo-elements inherit any inheritable properties from the element in the document tree to which they are attached.
的
:before和：后伪元素从它们所附着在文档树中的元素继承任何可继承属性。
I just tried inheriting width and it worked.
我只是尝试继承宽度并且它起作用了。
回答by peter_the_oak
Concerning these answers, I was just bumping into the aspect of transformation. It may resemble on inheritance; I hope it helps somebody.
关于这些答案，我只是碰到了转变的方面。它可能类似于继承；我希望它可以帮助某人。
Having this:
有这个：
<div class="box">
<div class="frame"></div>
</div>
and this transformation for frame:
和这种转变frame：
transform: rotate(10deg);
Then the frame:beforeand frame:afterare also transformed. Yet they do not have the properties of frame, such as widthand height, which is like explained above. Full example see here:
然后frame:before和frame:after也被转换。然而，它们没有 的属性frame，例如width和height，就像上面解释的那样。完整示例请参见此处：
http://jsfiddle.net/chafpgwt/1/
http://jsfiddle.net/chafpgwt/1/
On this fiddle, there are three nested squares, each rotated by 10 deg, but the transform definition is only set for the frame, not for frame:afterneither frame:before.
在这个小提琴上，有三个嵌套的正方形，每个正方形旋转 10 度，但变换定义只为 设置frame，不为frame:after两者设置frame:before。
It is a pitfall to think transformations also are not "inherited", as everything else is neither. The transformation has influence in another context.
认为转换也不是“继承的”是一个陷阱，因为其他一切都不是。这种转变在另一种情况下有影响。
