目次
疑似要素ってなに？
疑似要素とは、見た目だけ「あるように見せる」要素のこと！
つまり…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だけで見た目を操作できる。
・「ちょっとした装飾を後から付け足したい」ときに大活躍！
コメント