CSSだけで連番あててみる

使ってみたくなるやつ！！

あまり使い道はなさそうだけど、
あると使いたくなるものがCSS3には沢山ありますよね。

今回はこれ
DEMO

<dl>
	<dt>質問の内容です</dt>
	<dd>テキストテキストテキストテキスト</dd>
	<dd>テキストテキストテキストテキスト</dd>
	<dt>質問の内容です</dt>
	<dd>テキストテキストテキストテキスト</dd>
	<dd>テキストテキストテキストテキスト</dd>
	<dt>質問の内容です</dt>
	<dd>テキストテキストテキストテキスト</dd>
	<dd>テキストテキストテキストテキスト</dd>
</dl>

dt {
	counter-increment: q;
	counter-reset: a;
}
dt:before {
	content: 'Q' counter(q) '.';
}
dd {
	counter-increment: a;
}
dd:before {
	content: 'A' counter(a) '. ';
}

increment で、１進めて
reset で、リセットするってだけです。

dd 側のカウンターを
dtの時にリセットしておかないと
デモの例でいうと1から6までになってしまうのでご注意を。

一応IE8で見たらいけてたので
対応ブラウザに関してはあまり気にせずいけるかと思われます。

使い道考えたけど、
クライアントさんに記事とか書かせるときに
同じようなボックスに連番付与したデザインのときとか
クライアントさんがわざわざ連番いれていかなくても
勝手にカウントされていくとか、
そんな感じでしょうか？