
CSSのbeforeとafterとは?使用用途とテクニックご紹介!
CSS の ::before と ::afterとは?
CSS の ::before と ::after の疑似要素を使うと、
HTML の中にコンテンツを書くことなくページにコンテンツを挿入することができます。
最終的な結果は、実際には DOM 内にはないのですが、あたかも DOM 内にあるかのように、
ユーザーのページ上に表示されるため、SEOなどで不要な装飾や文章を表示させるのに便利です。
基本的には次のようになります。
p::before { content: "ビフォー"; } p::after { content: "アフター"; }
<div>
ビフォー
<!-- ここにコンテンツが表示されます -->
アフター
</div>
CSS の ::before と ::afterを使う局面
CSS の ::before と ::afterを使うと、
特定の要素の前後にコンテンツを追加することができます。
なので、文字の前にアイコンを表示させたり、吹き出しを作ったり、タグを作ったりするのに便利ですよね。
