:before和:after伪元素能够继承父元素的高度吗？

Question

我想知道 :before 和 :after 伪元素能否使用 inherit 值从父元素继承高度，而不是实际元素继承？

- AKG

---

不确定你的使用情况，但如果你只需要:before/:after与父元素具有相同的高度，则在伪元素中使用height: 100%效果非常好。 - Adam Libuša

@AdamLibuša，你在这里忽略了一个重要的点。父元素应该被定位为相对位置，伪元素才能绝对定位以使其生效。 - Ankit Jain

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;
}

- BoltClock

Answer 2

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

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

我试过继承宽度，它可以工作。

- joe

---

我会编辑我的回答以澄清。我认为它太简短了，因此可能会让人感到困惑。 - BoltClock

еҪ“жҲ‘жҸҗеҮәиҝҷдёӘй—®йўҳж—¶пјҢжҲ‘并дёҚзҗҶи§Ј::beforeе’Ң::afterдјӘе…ғзҙ зҡ„е·ҘдҪңеҺҹзҗҶгҖӮд»Ҙиҝҷз§Қжғ…еҶөдёәдҫӢпјҡdivA > divB::after - жҲ‘зҡ„й—®йўҳж„ҸеӣҫжҳҜжғізҹҘйҒ“divB:afterжҳҜеҗҰиғҪ继жүҝdivAзҡ„еұһжҖ§гҖӮеңЁжҲ‘зҡ„й—®йўҳиЎЁиҝ°дёӯпјҢвҖңзҲ¶е…ғзҙ вҖқжҢҮзҡ„жҳҜdivAпјҢвҖңе®һйҷ…е…ғзҙ вҖқжҢҮзҡ„жҳҜdivBгҖӮжҲ‘еёҢжңӣжҲ‘зҡ„й—®йўҳиў«и§ЈйҮҠжҲҗиҝҷдёӘж„ҸжҖқгҖӮ - AKG

谢谢@BoltClock，现在更清楚了。AKG，我认为你的问题最初是被正确理解的，但无论如何现在都更加清晰:) - joe

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/ 在这个fiddle中，有三个嵌套的正方形，每个正方形都旋转了10度，但是变换定义仅针对frame而不是frame:after或frame:before。

认为变换也是不可继承的是一个陷阱，就像其他一切一样。变换在另一种情况下产生影响。

- peter_the_oak

Answer 4

如果你想使用伪元素::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%;
            
        }
}

- Manuel B