HTMLの疑似要素って何?

こんにちは、せぃゆーです。

デザイナーからいただいたCSSにbefore/afterって書いてあって「何だろうこれ？」と思いながら特に気にせず仕事をしていたのですが、最近デザイナー/クリエイターと呼ばれる分野に興味が出てきたのでHTML/CSSを再入門しようと思い勉強していたらbefore/afterについて書いてあったのでこちらに書こうと思います。

疑似要素とは?

HTMLに記述しないで、CSSによってコンテンツを変更するものです。

よく使う疑似要素

• ::before(要素の前にコンテンツを追加)
• ::after(要素の後にコンテンツを追加)

疑似要素の使い方

CSSでIDやクラスなどのセレクタの後に適応したい疑似要素を記述する

#test::before {
  content: "beforeのテキストです";
}
#test::after {
  content: "afterのテキストです";
}

See the Pen 疑似要素 by Yusei Ishii (@seiyu-nico) on CodePen.

要素の前後にそれぞれcontentで指定したテキストが表示されているのがわかります。

また、before/afterで指定したテキストは選択することができないので、コピペをする場合がある場合には利用に注意です。

まとめ

疑似要素には今回あげたbefore/after以外にもいくつか存在するので、気になった方はぜひ調べてみてください。

おすすめ書籍