CSSを使ってちょっとしたアイコンや文字装飾を追加したいとき、HTMLを書き直さずに実現できたら便利だと思いませんか？
そんなときに活躍するのが、CSSの擬似要素 ::before と ::after です。
本記事では、これらの疑似要素の基本的な使い方から、実際の使用例、そして導入するメリットまで、初心者の方にもわかりやすく解説します。
「そもそも擬似要素ってなに？」という方にも安心して読んでいただける内容です。
::before ::afterとは
::beforeとは
CSS において
::beforeは、選択した要素の最初の子要素として擬似要素を生成します。よくcontentプロパティを使用して、要素に装飾的な内容を追加するために用いられます。この要素は既定でインラインです。
引用：https://developer.mozilla.org/ja/docs/Web/CSS/::before
::afterとは
CSS において
::afterは、選択した要素の最後の子要素として擬似要素を生成します。よくcontentプロパティを使用して、要素に装飾的な内容を追加するために用いられます。この要素は既定でインラインです。
引用：https://developer.mozilla.org/ja/docs/Web/CSS/::after
疑似要素ってなに？
疑似要素とは、見た目だけ「あるように見せる」要素のこと！
つまり…HTMLには書かれていないけど、CSSだけで、前や後ろに文字やマークを追加できる仕組みです。
htmlに星マークはないですが、CSSだけで表示させることができます。
こんな感じ
::before と ::afterの使用例
::before は前につけるときに使いますが、後ろにつけたい場合は ::after を使います
疑似要素って、わざわざ使わなくてもよくない？
「最初からHTMLに書けばいいんじゃないの？」そう思いませんでしたか？
結論：たしかにそう。でも、CSSでやる意味がある！
HTMLに書いても間違えではありません。
でも、CSSの疑似要素を使うことで得られるメリットが、実はたくさんあるんです。
疑似要素を使うメリット
1 htmlをいじらず、CSSで一括でデザイン変更ができる
たとえば、たくさんのリストの前に ✔︎（チェックマーク）をつけたいとき、書き直すのは手間がかかるし、
あとでマークを変更したくなったとき大変💦
しかし、疑似要素を使って書くと,CSSだけを変更すればOK! しかも、あとでマークを変更したくなっても、CSSの一箇所変えるだけでよいので、手間がかかりません！
2 「中身（html）と見た目（CSS)を分けられる
・HTMLは本来、「何を書くか（意味）」を書く場所
・CSSは「どうみせるか（見た目）」を決める場所
✔︎HTMLに飾り文字を書くと、見た目と機能が混ざってしまいます。
✔︎CSSの擬似要素を使えば、きれいに役割分担できて、コードが読みやすくなります。
３ 条件付きで表示を変えることもできる
まとめ
::before →前に追加できる。
::after →後ろに追加できる。
・HTMLそのままで、CSSだけで見た目を操作できる。
・「ちょっとした装飾を後から付け足したい」ときに大活躍！
コメント