RYO.dev

最終更新日:

なぜ`::before`と`::after`には`content`プロパティを指定するの?

  1. なぜ?
  2. コードをチェック
  3. 最後に

なぜ?

contentプロパティの初期値はnormalです(ソース)。

::before::aftercontent: normal;が指定されていると、content: none;を指定したのと同じ状態になります(ソース)。

::before::aftercontent: none;が指定されていると、display: none;を指定されたかのように要素が表示されなくなります(ソース)。

::before::aftercontentプロパティの値がnoneではないとき、擬似要素はさも、擬似要素を指定している元の要素の直接の子要素であるかのようにふるまい、他の要素と同様にCSSでスタイリングできます(ソース)。

コードをチェック

content: "";の場合...

contentプロパティに空欄を指定してレンダリングした

擬似要素あり!

content: none;の場合...

contentプロパティにnoneを指定してレンダリングした

擬似要素なし!

content: normal;の場合...

contentプロパティにnormalを指定してレンダリングした

擬似要素なし!

最後に

もし誤った情報を見つけたり、お聞きしたいことがあったりした場合は、TwitterのDMメールにご連絡ください。