css擬似要素のcontentをhtmlからattr()で取得する

はじめに

cssの擬似要素（:beforeや:after）の中に入る要素はcssのcontentで指定することができますが、attrを使用することでjavascriptのようにhtmlから取得することができます。
コンテンツ（構造）と装飾の分離という意味でよりわかりやすい設計になるうえに、記述も少なくて済むのでおすすめ。

基本的な擬似要素

index.html

<p class="first">テキスト</p>

style.css

p:after {
  content: '擬似要素のテキスト';
}

これでpタグ内に擬似要素afterが表示される訳なんですが、
これには問題があって、

• css内に表示する文章が含まれていて、コンテンツと装飾が分離できていない
• 表示したいコンテンツごとに全てcssで設定する必要がある

ことになります。

コンテンツと装飾を分離する

index.html

<p data-text="擬似要素のテキスト">テキスト</p>

style.css

p:after {
  content: attr(data-text)"";
}

とすることでpタグの「テキスト」の後にdata-textの「擬似要素のテキスト」を表示することができ、コンテンツと装飾を分離し、コンテンツは全てhtml内に書くことができます。

複数要素に対してcontentを設定する

たとえば複数の要素に対してことなるcontentを設定しなければならない時に通常だと

index.html

<p class="first">テキスト</p>
<p class="second">テキスト</p>

style.css

.first:after {
  content: "最初の要素のテキスト";
}
.second:after {
  content: "2番目の要素のテキスト";
}

となり、いちいち全てのパターンをcssで指定する必要があるのですが、
上記のattr()を利用すると。

index.html

<p data-text="最初の要素のテキスト">テキスト</p>
<p data-text="2番目の要素のテキスト">テキスト</p>

style.css

p:after {
  content: attr(data-text)"";
}

というように、一つのcssでまとめることができ便利です。

利用例

たとえばhoverしたときに表示するテキストを切り替えるボタンなどであれば、

index.html

<button data-text="スタート">テキスト</button>
<button data-text="終了">テキスト</button>

style.css

button:hover {
  text-indent: -9999px;
}
button:hover:after {
  content: attr(data-text)"";
}

というようにjsを使わずとも内容を切り替えることができます。（表示位置などは適宜調整してください）
また、要素やパターンが増えてもcssを修正することなく、対応が可能となります。

WEBアプリケーションなど、コンポーネントの概念が必要なものでは特に便利に使えるかと思います。