スタイルがズレているのはスキンのリファクタリング中だからです。

置換要素に擬似要素は使えない

css3None
この記事は約1分で読めます。
スポンサーリンク

HTML5 の置換要素に CSS3 で擬似要素を指定することはできません。

置換要素とは?

HTML の要素の1つです。
動画再生の video 、画像表示の img などです 。
簡単にいえば、文字以外の要素です。

擬似要素とは?

CSS のプロパティの1つです。
before after のことです。

置換要素一覧

次の要素は置換要素です。擬似要素の指定はできません。
すなわち、この要素以外は擬似要素を使うことができます。

  • img
  • iframe
  • area
  • audio
  • canvas
  • embed
  • input
  • menu
  • object
  • hr

水平線表示の hr 要素に擬似要素を指定することはできます。
ただ、表示が崩れます。

擬似要素を使うときは、 div 要素で囲うことをおすすめします。
置換要素は擬似要素が使えませんが、 div 要素は擬似要素が使えるからです。

デモプレイ

CodePen で適当に書きました。
擬似要素が反映されていないことが分かるでしょう。

See the Pen 置換要素と擬似要素 by veilnui (@veilnui) on CodePen.

コメント

タイトルとURLをコピーしました