list-styleで括弧付の数字を振りたいときという記事を見まして、まさにこれがやりたかったわけですが、応用もできるよ、ということで、h2タグを使った例が紹介されていました。

h2 { counter-increment : chapter ; }
h2:before { content : "第" counter(chapter) "条" ; }

これって俺の好きなdl, dt, ddで使えるやん！と思った次第です。
なんでこれを使いたくなったかというと、利用規約とかを整形している最中だったのですが、番号振るのが億劫だったのです。

以下、sassです。dtが出る度に自動で条を振ってくれます。括弧が必要だったら付ける程度で。
あと、dd要素内でol liの入れ子があったらよきに計らってくれます。
入れ子先で括弧付き番号を振ってくれます。便利。

dl {
  dt {
    font-weight: bold;
    counter-increment: chapter;
    &:before {
      content: "第" counter(chapter) "条（"
    }
    &:after {
      content: "）"
    }
  }
  dd {
    margin: 0 0 1em 2em;
    &> ol > li {
      list-style: outside decimal;
      margin-left: 2em;
      &> ol > li {
        list-style-position: inside;
        counter-increment: cnt;
        &:before {
          display: marker;
          content: "(" counter(cnt) ") ";
        }
      }
    }
  }
}

cssは奥が深いですのう…。

Tweet