CSS3

プロパティ

counter-increment

[Edge]○。→●、mdn

カウンターのインクリメント。

ユーザー エージェントには、視覚的でないものも含む すべての媒体に対し、これらのプロパティをサポートすることが期待される。

既存のカウンター（たち）の値を操作する。それに先立って、要素上に所与の名前のカウンターが無い場合に限り、その名前のカウンターをインスタンス化する。値は、次に従って定義される：

以下のCSSが組み込んであります：

[<counter-name> <integer>?]+

名前 <counter-name> のカウンターの値を指定された <integer> で増減する。

<integer> が省略された場合の既定は、counter-increment 用には 1 になる。

<counter-name> は、その名前を <custom-ident> として表現する。<counter-name> は、キーワード none は無効。

要素上に所与の名前のカウンターが無い場合、カウンターの値を［設定する／増減する］に先立って、新たなカウンターをインスタンス化する（その名前、要素、0）。

開始<SPAN class="Test Test0">SPAN要素</SPAN>終了<BR>
開始<SPAN class="Test Test0">SPAN要素</SPAN>終了<BR>
開始<SPAN class="Test Test0">SPAN要素</SPAN>終了<BR>

カウンター名のみ

開始<SPAN class="Test TestP2">SPAN要素</SPAN>終了<BR>
開始<SPAN class="Test TestP2">SPAN要素</SPAN>終了<BR>
開始<SPAN class="Test TestP2">SPAN要素</SPAN>終了<BR>

+2のインクリメント

開始<SPAN class="Test TestM2">SPAN要素</SPAN>終了<BR>
開始<SPAN class="Test TestM2">SPAN要素</SPAN>終了<BR>
開始<SPAN class="Test TestM2">SPAN要素</SPAN>終了<BR>

-2のインクリメント

none

要素は、どのカウンターの値も改めない。

開始<SPAN class="Test TestNone">SPAN要素</SPAN>終了<BR>
開始<SPAN class="Test TestNone">SPAN要素</SPAN>終了<BR>
開始<SPAN class="Test TestNone">SPAN要素</SPAN>終了<BR>

h1::before {
    content: "第 " counter(章) " 章. ";
    counter-increment: 章;  /*  章 に 1 を加算する  */
    counter-reset: 節;      /*  節 を 0 に設定する  */
}
h2::before {
    content: counter(章) "." counter(節) " 節. ";
    counter-increment: 節;
}

プロパティの値に同じ <counter-name> が複数回生じた場合、それらは、現れた順に処理される ― すなわち ：

テスト