Counter()関数を使用してCSSだけカウントアップできる

カウントアップする機能をCSSを用いて表現できます。順序付きリストのようなものです。

使い方

• count-rest: cnt; で初期化する
• counter-increment: cnt; で増加
• counter-increment: cnt -1;で減少
• counter(cnt); で現在の値
• 通常は擬似要素contentプロパティで使用する

Using CSS counters

.area1 {
    counter-reset: cnt;
}
.area1 p::before {
    counter-increment: cnt;
    content: counter(cnt) ": ";
}

p要素の手前の数値がインクリメントされていますね。

ol,li要素だけでなく自由に番号を振れます。すごいですね。

逆カウンター

counter-reset: reversed(cnt);

カウントダウンする。

chrome非対応（2022.9

補足

いくつかの変数（変数とは表記されていないが）の初期化、増減を同時にできる。

階層がある場合適宜リセットすると、その都度、子は１から始まる。多階層のol>liで、olでリセットするなど。

Containment（封じ込め）されている場合

<style>
.contain {
    contain: style;
    background-color: aliceblue;
}
</style>

<div class="area1">
    <p>001</p>
    <p>002</p>
    <div class="contain">
        <p>003</p>
        <p>004</p>
        <p>005</p>
    </div>
    <p>006</p>
</div>

スタイルが封じ込められている場所がスルーされる。スタイルが分離されています。

封じ込め領域内でもカウントは進まない。

補足

@counter-style　独自のスケールを使える。デモが参考になります。