counter() 无法读取 --n 的值，因其仅支持 counter-reset 声明的命名计数器，与自定义属性机制完全隔离；content 不支持 var()，必须用 @property + calc() + counter-reset 中转实现动态显示。
不能直接用 CSS 自定义属性（--n）配合 counter() 实现动态计数器效果，因为 counter() 不接受变量值；必须通过 @property + @keyframes + calc() 中转才能间接驱动显示。
为什么 counter() 无法读取 --n 的值
CSS 计数器系统（counter-reset/counter-increment）和自定义属性（--n）属于两套互不兼容的机制：counter() 只能引用由 counter-reset 声明、由 counter-increment 更新的命名计数器，它完全无视自定义属性的变更。即使你写了 content: counter(myCounter) " / " var(--n);，后者也会被忽略或报错（content 不支持 var()）。
真正可行的纯 CSS 计数路径：@property + @keyframes + calc()
要让一个数字随时间/交互变化并显示出来，必须绕过 counter()，改用以下组合：
-
@property --n { syntax: "<integer>"; inherits: false; initial-value: 0; }</integer>—— 声明可动画的整数型自定义属性 -
@keyframes count { from { --n: 5; } to { --n: 0; } }—— 在动画中更新--n -
content: counter(dummy) "s";配合counter-reset: dummy calc(var(--n));—— 利用calc()将--n转为counter-reset可接受的初始值（注意：仅支持重置，不支持递增）
示例关键片段：
立即学习“前端免费学习笔记（深入）”；
@property --count {
syntax: "<integer>";
inherits: false;
initial-value: 5;
}
.timer:hover::after {
animation: countdown 5s steps(5, end);
}
@keyframes countdown {
0% { --count: 5; }
20% { --count: 4; }
40% { --count: 3; }
60% { --count: 2; }
80% { --count: 1; }
100% { --count: 0; }
}
.timer::after {
content: counter(dummy);
counter-reset: dummy calc(var(--count));
}
常见错误与兼容性陷阱
这些地方最容易卡住：
-
counter-reset: dummy var(--count)❌ ——var()不被支持，必须套calc() - 在 Firefox 或 Safari 中使用
@property❌ —— 目前仅 Chromium 内核（Chrome/Edge/新版 Opera）稳定支持@property的<integer>类型 - 试图用
counter-increment动态响应--count变化 ❌ —— 它只响应 DOM 元素匹配和渲染时机，不监听自定义属性变更 - 把
counter-reset放在伪元素上期望每次 hover 都重置 ❌ —— 它只在该伪元素生成时生效一次，且无法绑定到事件周期
真正需要“可交互、可暂停、可重置”的纯 CSS 计数器，目前只能靠 @property + 关键帧硬编码步进值；若需任意起始值或动态控制，CSS 仍无解，得退回到 JS。
