【CSS擬似要素】::beforeと::afterの基本の使い方について

疑似要素のbeforeとafterとは？

CSSの擬似要素::beforeと::afterは、要素の内容の前後に追加のコンテンツを挿入する際に使用されます。これらは主に装飾目的で使われ、HTML構造を変更せずにビジュアルエフェクトを加えることができるため、Webデザインにおいて非常に便利です。

擬似要素のメリット

1.HTMLのクリーンさを保持: デザイン専用のコンテンツをHTMLに追加せずに、CSSだけでビジュアルエフェクトを実現できます。
2.保守性の向上: 装飾要素がCSSに集約されているため、デザインの変更が容易になります。
3.マークアップの簡素化: 余分なHTMLタグを減らし、よりシンプルで読みやすいコードになります。

基本の使い方

::beforeと::after擬似要素は、指定した要素の内容の前後にコンテンツを挿入します。
これらはcontentプロパティと組み合わせて使用され、挿入するコンテンツを定義します。

.element::before {
 content: "挿入したい内容"; 
  /* その他のスタイル指定 */
} 

.element::after {
 content: "挿入したい内容"; 
  /* その他のスタイル指定 */
}

<div class="element">これはサンプルテキストです。</div>

サンプル

::before要素

::beforeを使った場合はベース要素の手前に追加されます。

See the Pen
Untitled by GROWORKS (@groworks)
on CodePen.

::after要素

::afterを使った場合はベース要素の後に追加されます。

See the Pen
Untitled by GROWORKS (@groworks)
on CodePen.

疑似要素で画像を表示する

::beforeや::after擬似要素を使って画像を挿入することも可能です。
contentプロパティにurl（画像のパス)を書くことで、疑似要素として画像を表示させることもできます。

.element::before { 
 content: url（画像のパス); 
} 
.element::after { 
 content: url（画像のパス); 
}

コロン(:)の数について

疑似要素には、コロンが1つ:beforeの書き方と、コロンが2つ::beforeのものを見たことがあるかもしれません。

:before
::before

CSS3以降、疑似要素は::（2つのコロン）を用いて表記します。これは、疑似クラスと疑似要素を区別するための記法です。従って、::beforeと::afterは2つのコロンを使用します。

疑似要素を使用する際の注意点

・::beforeと::after擬似要素は、contentプロパティが指定されている場合にのみ表示されます。
contentプロパティを指定しなければ何も表示されません。
・画像を挿入する際は、適切なサイズと配置を考慮する必要があります。
・これらの擬似要素は、インライン要素やインラインブロック要素に対しても使用できますが、表示結果を適切に制御するためには追加のスタイリングが必要になる場合があります。