css で attr() と var() と counter() の組み合わせ
解決したいこと
CSS の特定の組み合わせでなぜか動かない…
動かない理由が何なのか、解決策はあるのか、誰か教えてください。
発生している問題
HTML が以下の場合の時
<label>1:</label>
<div class="bar" style="--percent: 60"></div>
<label>2:</label>
<div class="bar" style="--percent: 40"></div>
<label>3:</label>
<div class="bar" style="--percent: 20"></div>
動く
.bar::before {
counter-reset: progress var(--percent);
content: counter(progress);
}
HTML が以下の場合の時
<label>1:</label>
<div class="bar" start="60"></div>
<label>2:</label>
<div class="bar" start="40"></div>
<label>3:</label>
<div class="bar" start="20"></div>
これも動く
.bar::before {
--percent: attr(start);
content: var(--percent);
}
でも、これは動かない
.bar::before {
--percent: attr(start);
counter-reset: progress var(--percent);
content: counter(progress);
}
組み合わせると途端に動かなくなる…なぜに？
0
