web-dev-qa-db-ja.com

：beforeおよび：after擬似要素は親要素から高さを継承できますか？

:beforeおよび:after疑似要素は、実際の要素がそうしなくても、inherit値を使用して親から高さを継承できますか？

csscss-selectorspseudo-elementinheritance
20
AKG

いいえ。疑似要素が生成要素の親から値を継承できる唯一の方法は、生成要素自体もその親から継承する場合です。

これは、継承が親から子へ、一度に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;
}
24
BoltClock

この質問はかなり古いことは承知していますが、今日私はそれを偶然見つけました。 http://www.w3.org/TR/CSS21/generate.html によると、受け入れられた答えは正確ではありません：

:beforeおよび：after疑似要素は、それらが接続されているドキュメントツリーの要素から継承可能なプロパティを継承します。

幅を継承してみたところ、うまくいきました。

12
joe

これらの答えに関して、私はただ変革の側面にぶつかっていました。それは継承に似ているかもしれません。誰かのお役に立てば幸いです。

これを持っている：

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

frameのこの変換：

transform: rotate(10deg);

次に、frame:beforeおよびframe:afterも変換されます。しかし、これらはframeやwidthなどのheightのプロパティを持っていません。完全な例はここを参照してください：

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

このフィドルでは、3つのネストされた正方形があり、それぞれ10度回転しますが、変換定義はframeにのみ設定され、frame:afterにもframe:beforeにも設定されません。

変換も「継承されない」と考えるのは落とし穴です。変化は別の状況で影響を及ぼします。

2
peter_the_oak