data属性でリスト項目にカテゴリー・ラベルを表示

data属性を使ってリスト項目にカテゴリーのラベルを表示する。

デモページを表示

CSS

補足

• データ属性（data-category）のついたリスト項目の before 疑似要素でカテゴリー・ラベルを表示している。
• リスト項目の内容が長く、折り返したときにカテゴリー・ラベルの下へ回り込まないよう、ラベルはリスト項目左上の固定位置に表示し、リスト項目には左余白を設定している。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

HTML

補足

• li 要素の data属性（data-category）に設定した値が、カテゴリー・ラベルとして表示される。