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

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属性の内容を出力することができる。