手動でCSSカウンタを増やす

Question

20番目の項目以降に開始するCSSカウンタを20にリセットしたいと考えています。目標は、付随する「20」の数字を持つ2つのリスト項目を持ち、通常どおりリストを続けることです。

ol { 
    list-style-type: none; 
    counter-reset: quote-counter; 
} 
ol .list-item__inner::before { 
    content: counter(quote-counter); 
    counter-increment: quote-counter; 
} 

これはおそらく（これはもちろん動作しません）？

li:nth-child(20) { 
    counter-reset: quote-counter 20; 
} 

Answer 1

あなたの問題は、あなたが欲しいの繰り返しを得るためにn - 2にresetにしたいのでcounter-incrementが呼び出される前にcounter-resetプロパティはカウンタを設定することである。

ol { 
 
    list-style-type: none; 
 
    counter-reset: quote-counter; 
 
} 
 
ol li::before { 
 
    content: counter(quote-counter) ". "; 
 
    counter-increment: quote-counter; 
 
} 
 

 
li:nth-child(6) { 
 
    counter-reset: quote-counter 4; 
 
}

<ol> 
 
    <li>first</li> 
 
    <li>second</li> 
 
    <li>third</li> 
 
    <li>fourth</li> 
 
    <li>fifth</li> 
 
    <li>sixth</li> 
 
    <li>seventh</li> 
 
</ol>

あなたはcounter-resetおよびの注文のためにn - 1ではなく、n - 2が必要ですを適用する必要があります。コンテンツに、

継承カウンタがリセットカウンタの前に行う必要があり、設定カウンタの前に行う必要があり、インクリメントカウンタの前に行われなければならない（例えば、カウンタを使用する前に行わなければならない：仕様から引用プロパティ）。

リセットがインクリメントの前に行われるので、インクリメントによって正しい数になるように、カウンタをもう一度後ろに移動する必要があります。