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を使うと、

 

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

 

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

 

CSS の ::before と ::afterを使って文字の前にアイコンを表示させる画像
CSS の ::before と ::afterを使って文字の前にアイコンを表示させる画像
藤沢瞭介(Ryosuke Hujisawa)
  • りょすけと申します。18歳からプログラミングをはじめ、今はフロントエンドでReactを書いたり、AIの勉強を頑張っています。off.tokyoでは、ハイテクやガジェット、それからプログラミングに関する情報まで、エンジニアに役立つ情報を日々発信しています!

未整理記事

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です