counter-incrementでカウンター値を進める【CSS】

counter-incrementプロパティは、contentプロパティで指定ができるカウンター値を進めるのに使用するプロパティです。

{counter-increment: カウンター名進める値;}

counter-incrementの値の指定方法

counter-incrementプロパティでは、値を進めるカウンター名と、進める値を任意で指定します。

進める値には0や負の値を指定することもでき、省略した場合は1になります。

次の例では、numberというカウンター名と更新値1を指定しています。

.counter-ex {
　counter-increment: number 1;
}
.counter-ex:before {
　content: counter(number) “位　”;
}

90点
85点
80点

次の例では、number2というカウンター名と更新値2を指定しているので、2位・4位・6位という風に2ずつ進みます。

.counter-ex {
　counter-increment: number2 2;
}
.counter-ex:before {
　content: counter(number2) “位　”;
}

90点
85点
80点

ちなみにカウンターを挿入しているのはcontentプロパティです。