【CSS】擬似要素の中身を可変にする

擬似要素の中身を柔軟に変えたい場合のやり方をご紹介します。

擬似要素の中身を可変にする方法

まずは例をご覧ください。

See the Pen Untitled by Takuma (@takushin0202) on CodePen.

何かの手順を紹介するようなボックスを上から順に並べ、赤丸で囲んだところの数字が順を追って増えているのが分かるかと思います。

この赤丸で囲んだ青色の三角とその中の数字の部分は擬似要素で作成しているのですが、どうやって数字が順を追うごとに増えるように作っているか分かりますでしょうか？

結論を言ってしまうとhtmlのdata属性を使用しています。data属性を使うと擬似要素のcontentの中身を可変（柔軟に変更できる）にすることができます。

HTMLを見てみると

<div class="box">
  <div class="box-title" data-title-number="1">ステップ１</div>
</div>

<div class="box">
  <div class="box-title" data-title-number="2">ステップ２</div>
</div>

<div class="box">
  <div class="box-title" data-title-number="3">ステップ3</div>
</div>

box-titleというクラス名がついたdiv要素にdata-title-number=”数字”というものをつけ（data-〇〇の〇〇は任意の値）、各boxの順番に応じて数字を変えているのが分かるかと思います。

そしてCSSのdata属性に関連する必要な部分だけを見てみると、

content: attr(data-title-number);

contentのところでattr(data-title-number)と指定しています。

普段ここにはダブルクオーテーション（” ”）で中身が空か、何かしらの数字やテキストを入れるかと思いますが、今回はattr( )の括弧の中にdata属性の値を入れています。

このように指定することで、html側で入れた値がcontentに代入されるようになっており、boxの順番に応じた数字を表示することが可能になっているわけです。

似たような事例があればぜひ参考にしてみてください。