::beforeと::afterを使って要素の前後に文字を追加する

擬似要素を使って文字や記号を挿入する

CSSには::beforeや::afterという擬似要素が用意されており、これらを使うと特定の要素の前後に文字や要素を追加することができます。

img要素やvideo要素などの置換要素以外であれば使用可能です。

基本的な使い方

擬似要素::beforeと::afterの基本的な使い方を紹介します。
次のようなHTMLに適用していきます。

擬似要素を適用するHTML

<section>
  <p>特定の<span>テキスト</span>の前後に文字を追加。</p>
</section>

この中のspan要素の前後に、擬似要素でテキストを挿入してみます。

擬似要素の適用例

section p span::before {
  content: "「";
  color: #7fb7da;
  font-size: 129%;
}
section p span::after {
  content: "」";
  color: #7fb7da;
  font-size: 129%;
}

HTML コード例

<section>
  <p>特定の<span>テキスト</span>の前後に文字を追加。</p>
</section>

::beforeと::afterにあるcontentプロパティで指定した文字が、span要素の前後に挿入されます。
フォントサイズや色の指定方法は通常のテキストと同じです。

記号をコードで指定して挿入する

続いて、contentプロパティに記号を指定する方法を解説します。
span要素の前後に、「"(ダブルクォーテーション)」を追加して見ましょう。

contentプロパティへの記号の指定例

section p span::before,
section p span::after {
  content: "\22";
  color: #7fb7da;
  font-size: 129%;
}

HTML コード例

<section>
  <p>特定の<span>テキスト</span>の前後に文字を追加。</p>
</section>

「"(ダブルクォーテーション)」は数値文字参照(16進数)にすると「"」となりますが、contentプロパティでは「\(バックスラッシュ)」に続いて数字部分「22」を指定することで記号が表示されます。