content 属性不支持直接解析 css 变量，因规范限制其仅接受字符串、attr()、counter()等有限类型；需通过 counter-reset 结合 counter() 间接实现变量值显示。
content 属性本身不支持直接解析 CSS 变量（var(--num)），写成 content: var(--num); 会完全失效，浏览器忽略该声明——这不是 bug，是规范限制。
为什么 content 不能直接用 var()
CSS 的 content 是一个“生成内容”属性，只接受字符串字面量、attr()、counter()、counters() 和 URL 等有限类型。它不参与 CSS 变量的计算上下文，var() 在这里不会被求值，而是当作无效语法丢弃。
常见错误现象：
- 页面上伪元素完全不显示内容（连空格都没有）
- 开发者工具里能看到
content声明被划掉（strikethrough） - 误以为是变量没定义，其实即使
--num: 42已声明，content: var(--num)仍不工作
用 counter-reset 中转变量值的原理
关键突破口在于：counter-reset 的第二个参数（初始值）**支持 CSS 变量求值**，而 counter() 函数能安全读取这个已初始化的计数器值。
所以实际走的是这条链路：--percent: 75 → counter-reset: progress var(--percent) → counter(progress) → 渲染为 "75"
实操要点：
- 必须为每个需要显示变量的元素单独设置
counter-reset，不能靠继承或全局重置 - 计数器名（如
progress）要唯一，避免多个元素共用同一计数器导致互相覆盖 -
counter-reset: name var(--val)中的var(--val)必须是整数；小数会被截断为整数（99.6→99） - 如果变量未定义或值非法（如
""、auto），计数器初始化为0
如何补零、加单位或支持小数
counter() 只输出纯数字，不支持格式化。想显示 "087%" 或 "99.5%"？原生 CSS 没办法。
可行方案：
- 补零：用 JS 计算并写入
data-pct，再用attr(data-pct)+content（但attr()不触发重绘，适合静态值） - 小数/千分位：必须用 JS 更新
--num并配合transform/clip-path做视觉动画，counter仅作 fallback 显示整数部分 - 单位符号（如
%）：只能硬拼，content: counter(progress) "%"；counter(progress "%")是语法错误
移动端与性能要注意什么
这个技巧在 iOS Safari 和 Android Chrome 上都可用，但要注意：
- 频繁修改 CSS 变量（如每帧更新进度）会触发大量
counter-reset重计算，可能造成 layout thrashing - 别把这种伪元素塞进
position: sticky或滚动容器里，重排成本高 - 若目标是动画式数字增长（非跳变），优先考虑 JS +
transition: transform方案，比强行用steps()+counter-increment更可控
真正容易被忽略的点是：counter-reset 的变量求值只发生在样式计算阶段，不是响应式更新——变量变了，但没触发重排时，counter() 不会自动刷新。得靠其他方式（比如改伪元素的 opacity 或添加 class）来“撬动”重绘。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
