CSS　contentプロパティのcounter()を使い、cssのみで自動連番（２）

サイトマップ

営業日カレンダー

お問い合わせ

リスト表示で自動連番したいとき、olタグを使用しますが、並べた順に単にに数字がふられるだけです（【サンプル01】）。これをカテゴリーで分けたり、補足的な説明を加えたりする場合、counter()関数が便利です。【サンプル02】は、olタグにcounter()関数を使用して、リストに補足的な表現を加え、二つに分類して表示しています。

定義リストにcounter()関数を使用した「CSS　contentプロパティのcounter()を使い、cssのみで自動連番（１）」

【サンプル01】olタグを使ったリストの自動連番

【サンプル02】counter()関数を用いて、リストのカテゴリー分け自動連番

【サンプル02】のCSSソース

.count li,.count2 li {
  list-style: none;
  margin-left:0;
  counter-increment: renban;
}
.count2 li {
  counter-increment: renban2;
}
.count li:before {
  content : "提出済の報告書 第" counter(renban) "項目：";
  padding-right: 12px;
  color:blue;
} 
.count2 li:before {
  content : "未提出の報告書 第" counter(renban2) "項目：";
  padding-right: 12px;
  color:purple;
}

　