content属性根本不支持var()函数，仅接受字符串、attr()、counter()、counters()和url()五类值；显示数字需用counter-reset中转，字符串则必须通过data属性+attr()配合js同步。
content 属性根本不支持 var() 函数，这不是报错，而是被浏览器静默丢弃——DevTools 里这行声明会被划掉，Computed 面板里压根不出现 content 值。
content 只认五类值，var() 不在其中
CSS 规范明确限定 content 只接受："string"、attr()、counter()、counters() 和 url()。它不参与任何 CSS 自定义属性的计算流程，也不 fallback、不降级、不提示。
-
content: "✓";✅ 合法 -
content: attr(data-label);✅ 合法（但 HTML 必须真有data-label属性） -
content: counter(num);✅ 合法（需配合counter-reset） -
content: var(--label);❌ 语法非法，整条声明被忽略
想显示数字变量？用 counter-reset 中转
突破口在 counter-reset 的第二个参数：它支持 var() 求值，而 counter() 能读取这个已初始化的计数器值。
- 链路必须是：
--num: 42→counter-reset: num var(--num)→content: counter(num) -
counter-reset和content必须写在同一选择器下，否则继承或层叠会干扰计数器作用域 -
var(--num)必须是整数；99.6会被截断为99 - 变量未定义或为空字符串时，计数器默认初始化为
0
想显示字符串或图标？只能靠 attr() + HTML 属性同步
content 不支持字符串拼接，也不解析 JS 或 CSS 变量。唯一合规路径是把值同步到宿主元素的 data-* 属性，再用 attr() 读取。
- HTML 写：
<button data-label="Save"></button> - CSS 写：
button::after { content: attr(data-label); } - JS 动态更新时，必须操作
element.dataset.label = "Updated"，不能只改style.setProperty('--label', ...) -
attr(data-label)中不能加引号，写成attr("data-label")是非法语法
真正难处理的不是“怎么写”，而是变量值看起来像生效了——比如缓存、编辑器误标、或 DevTools 没硬刷新就看 Computed 面板。确认是否生效，唯一可靠方式是硬刷新后打开 Computed 面板，找 content 字段是否存在且有值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
