リストにカウンタを設定する場合は、カウンタを生成する要素の親要素[*1]にてカウンタをリセットする必要があります。

counter-resetプロパティの記述における<整数値>は省略可能で、デフォルト値は0[*2]です。この値によって、リセットした際の初期値を指定することができます。

カウンタをつけたい要素に::before疑似要素を利用し、contentプロパティでカウンタを生成します。counter関数[*3]を利用し、対象となるカウンタ識別子を指定します。

  1. liにカウンタを生成する場合は、olまたはul。[脚注元へ]

  2. カウンタのデフォルト初期値は0なのには、なぜカウンタが0からではなく1から始まるのかというと、カウンタの表示は、全ての計算が終わってからその値を表示するという仕組みになっているからです。当然、カウンタがリセットされるたびにカウンタ値は0になり、その後、計算されて次の値が表示されるということになります。[脚注元へ]

  3. 一つの識別子で1-1-1、1-1-2、1-2-1、1-2-2…など入れ子のカウンタを生成したい場合には、counters関数を利用します。[脚注元へ]

この文書は、Lucky bag::blogのエントリー「CSS3 の target 疑似クラスで脚注を動的に表示する」のサンプルです。

アンカークリックで脚注内容が表示されます。[脚注元へ]をクリックで脚注内容が消えます。