CSS の ::before と ::afterとは？

CSS の ::before と ::after の疑似要素を使うと、

HTML の中にコンテンツを書くことなくページにコンテンツを挿入することができます。

最終的な結果は、実際には DOM 内にはないのですが、あたかも DOM 内にあるかのように、

ユーザーのページ上に表示されるため、SEOなどで不要な装飾や文章を表示させるのに便利です。

基本的には次のようになります。

p::before {
  content: "ビフォー";
}
p::after {
  content: "アフター";
}

<div>
  ビフォー
  <!-- ここにコンテンツが表示されます -->
  アフター
</div>

CSS の ::before と ::afterを使う局面

CSS の ::before と ::afterを使うと、

特定の要素の前後にコンテンツを追加することができます。

なので、文字の前にアイコンを表示させたり、吹き出しを作ったり、タグを作ったりするのに便利ですよね。