list-styleで括弧付の数字を振りたいときという記事を見まして、まさにこれがやりたかったわけですが、応用もできるよ、ということで、h2タグを使った例が紹介されていました。
1 2 | h2 { counter-increment : chapter ; }h2:before { content : "第" counter(chapter) "条" ; } |
これって俺の好きなdl, dt, ddで使えるやん！と思った次第です。
なんでこれを使いたくなったかというと、利用規約とかを整形している最中だったのですが、番号振るのが億劫だったのです。
以下、sassです。dtが出る度に自動で条を振ってくれます。括弧が必要だったら付ける程度で。
あと、dd要素内でol liの入れ子があったらよきに計らってくれます。
入れ子先で括弧付き番号を振ってくれます。便利。
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | 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は奥が深いですのう…。
