Edited at

HTMLで指定したdata属性をCSSから出力する

More than 3 years have passed since last update.


HTML5のdata属性について

HTML5からタグにdata属性を指定できるようになった。

<div class="hoge" data-hoge="ほげほげ">ディブの中身</div>


CSSからdata属性の中身を出力する

これをCSS側から出力するテクニックがある。

.hoge:before {

content: attr(data-hoge);
}

こんな感じ。


デモ


まとめ

content: attr(data-xxx);

という記法を使うと、CSSからdata属性の内容を出力することができる。