CSS变量无法直接在content中显示数值，是因为content属性不支持CSS变量的动态计算。可以通过计数器中转实现。

CSS变量虽强大，却无法在content属性中直接显示数值——这不是代码错误，而是CSS规范的硬性限制；不过，借助counter-reset与counter()的巧妙配合，可将数字型CSS变量“中转”为可见内容，实现如百分比、序号等动态数值展示，但需注意其仅适用于整数且不支持字符串、颜色等其他类型，真正通用的变量插值仍需data属性或JavaScript辅助。

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 能绕过规范限制做通用变量插值。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《CSS变量无法直接在content中显示数值，是因为content属性不支持CSS变量的动态计算。可以通过计数器中转实现。》文章吧，也可关注golang学习网公众号了解相关技术文章。