counter-incrementプロパティは、<識別子>に該当するカウンタを加算します。
このプロパティは、contentプロパティの値に<カウンタ>を指定した場合に使用できます。

対応ブラウザ

• 
• 
• 
• 
• 
• 
• 

プロパティの解説

値

[<識別子> <整数>?]+｜none｜inherit

初期値

none

適用される要素

全ての要素

継承

します

パーセント値

N/A

メディア

all

値の解説

[<識別子> <整数>?]+

1つ以上のカウンタ名を「h2count」とか「section」のように識別子で扱える文字であれば好きにつけることができます。
複数ある場合はcounter-increment: h2count h3count;のように、空白類文字で区切って書きます。
<整数>は、カウンタの増加値を示します。
たとえば、counter-increment: h2count 2見たいな感じで指定すると2ずつ増えていきます。
デフォルト値は1になっており0やマイナス値も指定可能です。なお、この値はオプションのため省略する事もできます。

none

カウンタを加算しません。

counter-incrementのサンプル

<div class="sample01">
<h3>タイトル</h3>
<p>text</p>
<h3>タイトル</h3>
<p>text</p>
<h3>タイトル</h3>
<p>text</p>
<h3>タイトル</h3>
<p>text</p>
<h3>タイトル</h3>
<p>text</p>
<h3>タイトル</h3>
<p>text</p>
</div>

<div class="sample02">
<h3>タイトル</h3>
<p>text</p>
<h3>タイトル</h3>
<p>text</p>
<h3>タイトル</h3>
<p>text</p>
<h3>タイトル</h3>
<p>text</p>
<h3>タイトル</h3>
<p>text</p>
<h3>タイトル</h3>
<p>text</p>
</div>

div.sample02,
div.sample01 {
  float: left;
  width: 240px;
  margin: 20px;
  padding: 15px;
  border: 1px solid #999;
}

div.sample02 {
  margin-left: 0;
}

div.sample01 h3 {
  counter-increment: h3count;
}

div.sample01 h3:before {
  content: counter(h3count) ". ";
}

div.sample02 h3 {
  counter-increment: h3count 7;
}

div.sample02 h3:before {
  content: counter(h3count) ". ";
}

h3要素にカウンタ名をセットし、セットしたカウンタを:before疑似要素でh3要素の前に生成するようにしています。このセットした要素の数をカウントしていくので、セットする要素をp要素などに変更するとh3要素の前に生成されるカウンタはp要素の数になります。

このサンプルを今見ているブラウザで表示すると以下のようになります。

サンプルのブラウザ上の表示

タイトル

text

タイトル

text

タイトル

text

タイトル

text

タイトル

text

タイトル

text

タイトル

text

タイトル

text

タイトル

text

タイトル

text

タイトル

text

タイトル

text

対応ブラウザで見ると、最初（左）のサンプルが1ずつカウントが増え、後（右）のサンプルが7ずつカウントが増えていくのが確認できます。
この増えたカウントをリセットするには、counter-resetプロパティの指定をします。