Help us understand the problem. What is going on with this article?

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

More than 5 years have passed since last update.

はじめに

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

MAL09
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away