CSSの基本｜before疑似要素の書き方・実例を徹底解説

（最終更新月：2023年10月）

✔このような方へ向けて書かれた記事となります

✔当記事を通じてお伝えすること

• CSS の :before 擬似要素の基本概念
• :before 擬似要素の書き方と応用事例
• :before 擬似要素を使った実例の紹介

当記事では、:before 擬似要素の基本から応用事例まで、具体的な例を交えて丁寧に解説していきます。

ぜひ最後までお読みいただき、CSS の :before 擬似要素をマスターしましょう！

CSS before疑似要素とは？

CSSのbefore疑似要素は、ある要素の前に、指定したコンテンツを挿入するための機能。

要素自体はHTMLで定義されますが、その前はCSSで制御され、デザインの自由度が大幅に上がります。

装飾要素の追加や、特殊なリストスタイルの作成など、HTMLだけでは表現できない高度なデザインを可能にするのです。

CSS before疑似要素の構文

この章では、CSSのbefore疑似要素の基本的な構文と、コンテンツの追加方法について説明します。

以下の2つのトピックに分けて説明していきます。

• 構文の基本形
• コンテンツの追加

構文の基本形

CSSのbefore疑似要素の基本的な構文は以下の通りです。

要素名::before {
  content: "ここに追加するコンテンツ";
}

この構文を使用すると、指定した要素の前にcontentで指定したコンテンツが追加されます。

ここでの要素名は任意の要素名、クラス名、ID名などが使用可能です。

コンテンツの追加

contentプロパティには、追加するコンテンツを指定します。

このプロパティを利用することで、テキストだけでなく、画像や特殊文字なども要素の前に挿入が可能。

ただし、HTMLの要素やテキストを動的に追加するためには、JavaScriptなどのプログラミング言語を組み合わせる必要があります。

実践的なbefore疑似要素の活用例

ここでは、実際のコードを見ながら、before疑似要素をどのように活用できるかを学んでいきます。

• 引用符の追加
• 装飾の実装
• やることリストのカスタマイズ
• 特殊文字の利用

引用符の追加

以下は、before疑似要素を使って引用符を追加する一例です。

• HTMLコード
• CSSコード
• 実際の表示結果

HTMLコード

<blockquote class="quote">This is a quote.</blockquote>

CSSコード

.quote::before {
  content: "“";
}

実際の表示結果

表示される文章は以下のようになります。

“This is a quote.

装飾の実装

次に、before疑似要素を用いて装飾を追加する例を見てみましょう。

• HTMLコード
• CSSコード
• 実際の表示結果

HTMLコード

<div class="decoration">Decorated text</div>

CSSコード

.decoration::before {
  content: "❖";
}

実際の表示結果

以下のように装飾が文章の前に追加されます。

❖ Decorated text

やることリストのカスタマイズ

この例では、やることリストにカスタムチェックマークを追加します。

• HTMLコード
• CSSコード
• 実際の表示結果

HTMLコード

<ul>
  <li class="check-list">Item 1</li>
  <li class="check-list">Item 2</li>
</ul>

CSSコード

.check-list::before {
  content: "✔ ";
}

実際の表示結果

以下のように、リストの各項目にチェックマークが追加されます。

✔ Item 1
✔ Item 2

特殊文字の利用

最後の例では、特殊文字を追加してみます。

• HTMLコード
• CSSコード
• 実際の表示結果

HTMLコード

<p class="copyright">All rights reserved.</p>

CSSコード

.copyright::before {
  content: "© ";
}

実際の表示結果

以下のように特殊文字が追加されます。

© All rights reserved.

これらの例からわかるように、before疑似要素はさまざまな場面で活用できます。

もっと多様な表現を試してみてください。

リストデザインのカスタマイズ

ここでは、before疑似要素を使ってリストデザインをカスタマイズする方法について学びます。

今回は以下の2つの項目について詳しく見ていきましょう。

• リストスタイルの変更（その1）
• リストスタイルの変更（その2）

リストスタイルの変更（その1）

この例では、標準のリストマークをカスタムマークに変更します。

<ul>
  <li class="custom-list">Item 1</li>
  <li class="custom-list">Item 2</li>
</ul>

.custom-list::before {
  content: "■ ";
}

このコードにより、リストのマークが以下のように四角に変更されます。

■ Item 1
■ Item 2

リストスタイルの変更（その2）

さらに、数字付きリストにもカスタムマークを適用することが可能です。

<ol>
  <li class="custom-number-list">Item 1</li>
  <li class="custom-number-list">Item 2</li>
</ol>

.custom-number-list::before {
  content: "Step " counter(list) ": ";
  counter-increment: list;
}

上記のようにコードを記述すると、以下のように表示されます。

Step 1: Item 1
Step 2: Item 2

以上のように、before疑似要素を用いれば、リストデザインも自由自在にカスタマイズすることができます。

タイトルデザインの強化

before疑似要素を用いて、タイトルに装飾を追加することも可能です。

例えば、以下のようにコードを記述します。

<h2 class="decorated-title">Section Title</h2>

.decorated-title::before {
  content: "【";
}
.decorated-title::after {
  content: "】";
}

このコードにより、タイトルが以下のように装飾されます。

【Section Title】

以上のように、before疑似要素を活用すれば、タイトルデザインも一層引き立てます。

対応ブラウザと注意事項

before疑似要素を用いたデザインは、ブラウザによって異なる表示となる場合があります。

また、その使用にあたり考慮すべき点も存在します。

以下の項目でそれらについて詳しく見ていきましょう。

• 対応するブラウザ
• アクセシビリティの考慮
• SEOへの影響

対応するブラウザ

CSSのbefore疑似要素は広範に対応するブラウザで利用可能です。

具体的には、Google Chrome, Firefox, Safari, Opera, Internet Explorer 8以降などが対応しています。

ただし、古いブラウザや一部のブラウザでは正常に表示されない可能性もあるため、注意が必要です。

アクセシビリティの考慮

before疑似要素で追加したコンテンツは視覚的に表示されるものの、スクリーンリーダーなどの支援技術では読み取られません。

そのため、本質的なコンテンツはHTMLでマークアップするよう心掛け、装飾的な要素に限りbefore疑似要素を使用するのが最適です。

SEOへの影響

before疑似要素で追加したコンテンツは、検索エンジンが解析するHTMLの一部ではありません。

したがって、SEOに影響を与える重要な情報を含めるべきではありません。

before疑似要素は主にデザインや装飾的な要素に使用することが推奨されます。

まとめ

当記事は、CSS before疑似要素の概要から具体的な活用例、注意点について学習してきました。

• CSS before疑似要素の基本的構文から実際の活用例
• 引用符の追加やリストスタイルの変更

CSSは非常に多機能で、その全てを理解するのは容易なことではありません。

しかし、1つ1つの機能を理解し、適切に活用することで、あなたのウェブページは大きく変化します。

これからも、CSSの世界を楽しみながら、素晴らしいデザインを生み出していきましょう！