css 的 content 属性不支持 var()，因其仅接受 string、attr()、counter()、counters() 和 url()；可用 counter-reset + counter() 中转数字变量实现显示，但无法处理颜色、字符串或条件逻辑。
不能直接用，不是写法错，是 CSS 规范根本不允许 content 解析 var()。 即使 --num: 42 定义得再正确，content: var(--num) 也会被浏览器静默丢弃——开发者工具里那行会被划掉，伪元素什么也不显示。
为什么 content 里 var(--x) 完全不生效
content 属性只接受四类值："string"、attr()、counter()、counters() 和 url()。它不参与 CSS 变量的计算上下文，var() 在这里不是“未定义”，而是“语法非法”。浏览器连尝试求值都不会做，直接跳过整条声明。
常见错误现象包括：
- 伪元素彻底空白，连空格都不占位
-
content: "→ " var(--label)这种拼接写法也无效，CSS 不支持字符串连接 - 误以为是变量作用域问题，其实即使
:root里定义了，照样不 work
用 counter-reset + counter() 中转数字变量
突破口在 counter-reset 的第二个参数：它**支持 var() 求值**，而 counter() 能读取这个已初始化的计数器值。整个链路是：--num: 75 → counter-reset: num var(--num) → content: counter(num) → 渲染为 "75"。
实操要点：
-
counter-reset必须和content: counter(...)写在同一个选择器规则里（比如都放在button::after中），靠继承容易失效 - 计数器名（如
num）要唯一；多个元素共用同一计数器名会互相覆盖值 -
var(--num)必须是整数；99.6会被截断成99，小数需提前乘倍数处理（如存--num-10x: 996，再手动拼"." counter(num-10x) "%"） - 若变量未定义、为空或非法（如
"auto"），计数器初始化为0
哪些值类型根本没法用这个技巧
这个中转方案只解决「显示数字」这一种情况。遇到以下情形，counter() 完全无能为力：
- 想显示颜色字符串，比如把
--color: #ff0000输出成文字"#ff0000" - 想显示路径、URL、图标名、任意非数字字符串
- 需要条件判断（如变量为空时显示默认文案）
这些必须换方案：data- 属性 + JS 注入，或服务端渲染。别指望纯 CSS 绕过规范限制做通用插值——这不是技巧深浅的问题，是能力边界。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
