はじめに
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アプリケーションなど、コンポーネントの概念が必要なものでは特に便利に使えるかと思います。