content属性根本不支持var()函数，仅接受字符串、attr()、counter()、counters()和url()五类值；数字需用counter-reset中转，字符串则必须通过data属性+attr()配合js同步。
content 属性根本不支持 var() 语法
不是写法错、不是浏览器旧、也不是变量没定义——content 在 CSS 规范里就**不接受 var() 函数**。它只认四类值："string"、attr()、counter()、counters() 和 url()。连求值过程都不会触发，content: var(--label) 这行声明会被浏览器静默丢弃，DevTools 的 Styles 面板里直接划掉，Computed 面板里压根不出现 content 这个属性。
为什么无引号的 --var 写法看起来“像生效”了
常见假象来源：
- 你实际看到的是 fallback 文本（比如写了
content: var(--label, "default")，但--label未定义，于是显示"default"） - 编辑器或 Lint 工具误判：VS Code 或 stylelint 可能高亮识别了
--label，但运行时无效 - 缓存残留：旧样式还在，硬刷新（
Ctrl+Shift+R）后消失 - 变量名拼错但恰好有同名全局属性（如误写
--title，而元素真有title="xxx"，结果被 attr(title) 拿走了）
想让 content 显示数字变量？必须用 counter-reset 中转
唯一合规路径是利用 counter-reset 的第二个参数支持 var() 求值这一特性：
-
counter-reset: num var(--num)必须和content: counter(num)写在同一个伪元素规则里（比如都放在button::after中） -
--num必须是整数；99.6会被截断为99 - 计数器名（如
num）需全局唯一，否则多个元素共用会互相覆盖 - 若
--num未定义或为空字符串，计数器初始化为0
想显示字符串、图标或任意文本？只能靠 data- 属性 + attr()
attr() 在 Chrome/Firefox 中对 data- 属性支持极差——content: attr(data-label) 会静默失败（返回空），只有 Safari 16.4+ 支持 attr(data-label string) 且需显式声明类型。
稳定做法是 JS 同步：
- HTML 写
<button data-label="Save"></button> - CSS 写
button::after { content: attr(data-label); } - JS 更新时必须改
el.dataset.label = "Updated"，不能只改document.documentElement.style.setProperty('--label', 'Updated')
真正难处理的，是变量值“看起来”被读取了——比如 JS 同步滞后、data 属性初始值和变量值碰巧一致、或 DevTools 缓存了旧 computed 值。每次验证前，先清空 Computed 面板再硬刷。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
