Q&Aなど、連番を付けて表示するコンテンツを後から更新する場合、削除や追加があると、番号付けの調整で苦労します。そんなとき、contentプロパティのcounter()関数を使うと、javascriptの手を借りずにCSSのみで、簡単に自動連番を実装できます。 サンプルは、下側の「Q&Aのカテゴリー01」と「Q&Aのカテゴリー02」の部分。いずれも「Q」と「A」の後ろに連番を自動で入れています。

実装の仕方：　●カウンター名を決め（例では、「question」と「answer」）、「Q&Aの…」のh3で「counter-reset: question;」として、カウンターを初期化（「answer」についても同様）。●定義リストのdtで「counter-increment: question;」として、「question」をインクリメント。同様にddでも「counter-increment: answer;」とします。●連番の記述は、「.cont02 dt: before」を使って、dtの前に、「content: "Q" counter(question) ".　";」の形式で。同じく「.cont02 dd: before」で「content: "A" counter(answer) ".　";」としています。

サンプルのCSSソース

h3.reset {	
  counter-reset: question; 
  counter-reset: answer;
  }
.cont02 dt {
  margin: 0;
  padding: 4px 8px;
  color: #6666cc;
  border-top:2px dotted #99ccff;
  border-bottom:2px dotted #99ccff;
  font-size: 15px;
  counter-increment: question;	
  }
.cont02 dt:before {
  font-weight:bold;
  color:blue;
  content: "Q" counter(question) ".　";	
  }
.cont02 dd {
  margin: 0;
  padding: 4px 8px;
  color: #aa6699;
  font-size: 15px;
  counter-increment: answer;
  }
.cont02 dd:before {
  font-weight:bold;
  color:#f11e98;
  content: "A" counter(answer) ".　";
  }