この記事は6分で読めます

【CSS】擬似要素の使い方

投稿日2025.1.17
更新日2025.1.17

- 開発
- フロントエンド

開発

なしょ

あとで読む

あまりCSSを扱ったことがない方や初学者にとって「擬似要素」はあまり聞き馴染みがない、あるいはレベルが高そうなワードに聞こえるかもしれません。

実際は擬似要素は要素の一部にスタイルを適用する単純なもので、そこまで難しいものではありません。ただ、応用の幅が広いので完璧に使いこなすのは少し難易度が高いかもしれません。

擬似要素を使うことができれば、コードの記述量を減らすことができ、HTMLが煩雑にならないので見やすくなります。
また、応用して使うことができれば、表現の幅がぐっと広がります。

簡単なHTMLやCSSが記述できるようになってきたら、ぜひ擬似要素を覚えてステップアップしていきましょう！

はじめまして、イッパイアッテナです。

ITと教養で、優秀なネコの手となり、あなたのあらゆる問題を解決します。あなたの相談役だったり、デザイナーだったり、広報だったり、わたしたちは”イッパイ”の顔をあなたに見せることができます。

Web制作の相談はこちら

擬似要素とは
- 擬似クラスとの違い
代表的な擬似要素
「content : “” ;」をつかう手法について
おわりに

擬似要素とは

擬似要素とは、HTMLを変更せずに要素の一部だけにスタイルを適用することができる方法です。

スタイルを一部だけ変更したい要素に「::before」や「::first-letter」などを使って、要素の先頭にアイコンなどを挿入したり、一文字目のフォントに変更を加えたりすることができます。

擬似クラスとの違い

似たもので「擬似クラス」というものがありますが、擬似要素が要素の一部のスタイルを変更する者に対し、擬似クラスは特定の条件で要素全体のスタイルを変更するものです。代表的なもので「:hover」や「:last-child」が挙げられ、マウスオーバーした時だけのスタイルを指定したり、li要素の最後だけ異なるスタイルを指定することができます。

擬似要素は「::（ダブルコロン）」を使い、擬似クラスは「:（コロン）」を使います。

今回は「::（ダブルコロン）」をつかう擬似要素について解説します。

代表的な擬似要素

擬似要素はたくさんの種類があります。全部をここで解説することは難しいので、使用頻度の高いものをピックアップして解説します。もっと知りたい！全種類なにがあるか気になる！という方はこちらをご覧ください。

::before

要素の直前にアイコンやテキストなどのコンテンツを追加することができます。

「::before」でアイコンを追加するコードが下記のとおりです。

.section-before__list ul li h3::before {
  content: "";
  display: inline-block;
  width: 25px;
  height: 25px;
  background-image: url(./images/tips_and_updates_FILL1_wght400_GRAD0_opsz48.svg);
  background-size: contain;
  vertical-align: middle;
}

こちらのやり方は、擬似要素（特に「::before」と「::after」）でよく使われる「content : “” ;」を使った手法です。この手法を覚えておくと、いろんなことに応用できます。後ほど詳しく解説します。

::after

要素の直後にアイコンやテキストなどのコンテンツを追加することができます。

「::after」でアイコンを追加するコードが下記のとおりです。

.section-after__list ul li h3::after {
  content: "";
  display: inline-block;
  width: 25px;
  height: 25px;
  background-image: url(./images/new_releases_FILL1_wght400_GRAD0_opsz48.svg);
  background-size: contain;
  vertical-align: middle;
}

こちらも先ほどと同様に「content : “” ;」を使った手法です。後ほど詳しく解説します。

::first-letter

要素内の一文字目のスタイルを指定することができます。

.section-letter p::first-letter {
  font-size: 2.4rem;
}

「::first-letter」で文字の装飾に関するCSSを記述するだけでOKです。

::first-line

要素内の一行目のスタイルを指定することができます。

.section-line p::first-line {
  font-size: 2.2rem;
  text-decoration: underline;

「::first-line」で文字やテキストに関するCSSを指定するだけでOKです。

ただし、あくまでも文章の一部なので指定できるプロパティは限られています。代表的なものだと、フォントに関するプロパティ（font-○○）や背景に関するプロパティ（background-○○）、line-heightなどのテキストそのものに関するプロパティなどが挙げられます。「margin」などの余白や「border」などの枠線（下線）の指定はできないので、text-decorationなどテキストを直接装飾する必要があります。（その分装飾の自由度が下がってしまうかもしれません）

使用できるプロパティについてもっと知りたい！という方はこちらをご覧ください。

「content : “” ;」をつかう手法について

擬似要素を使う上で「content : “” ;」を使えるかどうかが脱初心者の第一歩だと思います。
先ほどの「::before」を例にして詳しく解説します。

.section-before__list ul li h3::before {
  content: "";
  display: inline-block;
  width: 25px;
  height: 25px;
  background-image: url(./images/tips_and_updates_FILL1_wght400_GRAD0_opsz48.svg);
  background-size: contain;
  vertical-align: middle;
}

STEP

「content: “”;」で空の箱を用意する

擬似要素「::before」を使うには何かを挿入しないといけません。
その「何か」はテキストでも画像でも構いませんが、よく使うのが中身が空っぽの箱を挿入する方法です。

これが「content: “”;」です。

まだ中身が空っぽであることを宣言しただけなので、幅も高さも色も何もないので、画面上には何も表示されません。

STEP

「inline-block」でテキストと横並びさせて幅と高さを指定できるようにする

次に中身が空っぽの箱をどう表示させるかを決めます。

今回の場合、h3のテキストと横並びさせた上で「空っぽの箱」の大きさを指定したいので、「display: inline-block」を指定します。

STEP

空っぽの箱の幅と高さを指定する

widthとheightで準備した空っぽの箱のサイズを決めます。