Posted at

なんで::beforeと::after擬似要素にはcontentプロパティをいれるの?

なぜでしょう?

「contentプロパティを含めないと擬似要素が表示されないから」という答えはなしです。じゃあ、なぜcontentプロパティを含めないと擬似要素が表示されないのでしょうか?

僕はついこの前までこれに答えることができませんでした。というより、そういう疑問すら思い浮かばなかったです。「::before::afterを使うときはcontentプロパティをいれるもんだ」と盲目的に考えていました。

面白いことに、::before::afterについて解説しているページの多くではこの疑問について触れていませんでした。「::before::afterを使うときはcontentプロパティをいれないといけないよ!」と解説しているページはありますが、「なぜいれるのか」には触れられていませんでした。

僕はたまたま「なぜ」を知ることができたので、ここで紹介させていただきます。

間違いがあるかもしれないので、見つけたら教えてください。


contentプロパティの初期値とは?


Initial: normal

CSS Generated Content Module Level 3


初期値はnormalです。

(あれ、ソースって草案じゃなくて勧告されたやつ出した方がいいのかな...?)


content: normalだとどうなる?


For ::before and ::after, this computes to none.

CSS Generated Content Module Level 3


::before::aftercontent: normalcontent: noneを指定したときと一緒になります。


content: noneだとどうなる?


On pseudo-elements it inhibits the creation of the pseudo-element as if it had display: none.

CSS Generated Content Module Level 3


content: noneだと擬似要素は作られなくなります。


擬似要素の仕様書も確認しよう


When their computed content value is not none, these pseudo-elements generate boxes as if they were immediate children of their originating element, and can be styled exactly like any normal document-sourced element in the document tree.

Generated Content Pseudo-elements: ::before and ::after


擬似要素がcontent: noneじゃないとき、擬似要素は、元の要素の直接の子要素であるかのようにふるまい、他の要素同様にCSSでスタイリングできるよ、的な意味だと思います。


まとめると…

contentプロパティの初期値はnormal

 ↓

::before::aftercontentプロパティの値を指定しないと、値はnoneと解釈される

 ↓

contentプロパティの値がnoneのときの::before::afterは表示されない

 ↓

だから::before::afterにはcontentnormalnone以外の値を指定する必要がある!!


コードで確認してみよう


HTML

<div>このdivタグに::afterを指定する</div>



div:after {content: "";}のとき

1560333716588.jpg

擬似要素あり


div:after {content: none;}のとき

1560333894943.jpg

擬似要素なし


div:after {content: normal;}のとき

1560333999258.jpg

擬似要素なし

説明は以上になります。

お疲れ様でした!


おわりに

もし間違いがあったら教えてください。修正します。