CSSのcontent: “”;に動的に、attrを使ってHTMLのdata-から文字を取得して入れる方法

CSSの擬似要素

after、before でcontent: “”; というかたちで使うことが頻繁にあるのですが

この content: “”; のなかの文字は、CSS側で例えば content: “文字”; としたら

不変的な文字になりますよね。

これを、タグによっては変化するようにすることが出来るのが attr を使った方法

CSS で attr を使う

まずはどのようなコードなのか見てみましょう

<!--html-->
<h1 data-subtitle="サブタイトル" >メインタイトル</h1>

<!--css-->
<style>
h1:after {
  color: red;
  content: attr(data-subtitle)""; /*この行がポイント*/
}
</style>

上のコードにはHTMLの部分とCSSの部分があります

HTMLには data-subtitle というのがあり

この data-●● の data-より後ろは任意の名前に出来ます

この data-●● にある値がCSSのcontentとして読み込める部分になります

CSSには attr(data-subtitle) というのがあり

これはHTMLタグにあるものを指しています

今回はサブタイトルというのが data-subtitle に入っているので

これが after の content として出力されます

つまり、data-subtitle のところだけをタグごとに変えることで動的に、contentの内容を決めていくことが出来ます。

さらに、hタグの部分を増やしてやると、それぞれに対応したdataの内容が出力されるようになります

<!--html-->
<h1 data-subtitle="サブタイトル" >メインタイトル</h1>
<h1 data-subtitle="サブタイトル2" >メインタイトル2</h1>
<h1 data-subtitle="サブタイトル3" >メインタイトル3</h1>
<h1 data-subtitle="サブタイトル4" >メインタイトル4</h1>

<!--css-->
<style>
h1:after {
  color: red;
  content: attr(data-subtitle)""; /*この行がポイント*/
}
</style>

タグが増えても、CSSはひとつのコードで済みます

これをcontentに直書きでやっていたら、その分のCSSを作らないといけません

でも、こうすることでCSSは最小限に出来

また動的にコンテンツを作り出すCMSでとても力を発揮するでしょう

attrが使えるブラウザはこちらで確認できます

http://caniuse.com/#feat=dataset

一応、IE8+ 他最新のブラウザで対応できるようです