CSS变量不能在content属性中直接使用，因规范限制content仅支持字符串、attr()、counter()等特定值；可用counter-reset配合counter()间接显示数字变量值。
CSS 变量不能在 content 属性里直接显示，不是你写错了，是规范根本不允许。
为什么 content: var(--num) 完全不生效
content 属性只接受有限几种值类型：字符串字面量、attr()、counter()、counters() 和 url()。它不参与 CSS 变量的计算上下文，var(--num) 在这里不会被求值，而是被当作无效语法直接丢弃。
- 开发者工具里能看到该行
content声明被划掉（strikethrough），说明浏览器已忽略它 - 即使
--num: 42已在:root中正确定义，content: var(--num)仍无任何输出 - 这不是浏览器 bug，是 CSS 规范明确限制的行为（截至 2026 年仍无改变）
用 counter-reset + counter() 中转变量值
突破口在于：counter-reset 的第二个参数（初始值）**支持 var() 求值**，而 counter() 函数能安全读取这个已初始化的计数器值。整个链路是：--num: 75 → counter-reset: num var(--num) → counter(num) → 渲染为 "75"。
- 必须为每个需要显示变量的元素单独设置
counter-reset，不能靠继承或全局重置 - 计数器名（如
num）要唯一，多个元素共用同一计数器会导致互相覆盖 -
counter-reset: num var(--num)中的var(--num)必须是整数；小数会被截断（99.6 → 99） - 若变量未定义、为空字符串或非法值（如
"auto"），计数器初始化为0
实际写法示例与关键细节
假设你想在按钮后显示一个百分比数值：
立即学习“前端免费学习笔记（深入）”；
button {
--percent: 87;
}
button::after {
content: counter(percent) "%";
counter-reset: percent var(--percent);
}
注意以下几点：
-
counter()只能放在content里，不能用于其他属性 -
counter-reset必须写在同一个选择器或其祖先上（推荐写在同一规则中，避免继承干扰） - 如果要显示小数，得提前在 JS 或服务端处理成整数倍（例如
--percent-10x: 876，再用counter(percent-10x)后手动拼接".6%"） - 别试图用
counter()显示颜色、URL 或其他非数字内容——它只输出整数
真正容易被忽略的是：这个技巧只解决「显示数字」这一种情况；想显示字符串、颜色名、路径等任意值，counter 无能为力，必须换用 data- 属性 + JS 或服务端注入。别指望纯 CSS 能绕过规范限制做通用变量插值。
