content属性根本不支持var()函数，仅接受"string"、attr()、counter()、counters()和url()五类值；显示字符串须用data属性+attr()配合JS同步，数字则需通过counter-reset中转。
content属性根本不支持var()函数
这不是写法错误，也不是浏览器兼容问题，而是CSS规范明确禁止——content只接受五类值："string"、attr()、counter()、counters()和url()。var()不在其中，浏览器连求值都不会触发，直接静默丢弃整条声明。DevTools里这行会被划掉，Computed面板里根本不会出现content值。
为什么看起来“好像生效了”？
常见错觉来源有三个：
- 缓存或编辑器误标：VS Code等工具可能把
content: var(--tip)当成合法语法高亮，但硬刷新后看Computed面板，content字段为空 - 变量名拼写正确但未定义：比如
--tooltip-text写了，但实际用的是var(--tip-text)，浏览器不报错，只当无效声明处理 - 伪元素本身没渲染：忘了写
content: ""或content: " "，导致::before/::after盒模型根本没创建，后续样式再对也看不见
真正能显示动态文本的两种合规路径
必须绕过var()直连content的死路：
-
字符串类内容 → 用
attr()+data-属性：HTML写，CSS写button::after { content: attr(data-label); }；JS更新时必须操作el.dataset.label = "已发送"，不能只改setProperty('--label', ...) -
数字类内容 → 用
counter-reset中转：定义--num: 42，然后在同选择器下写counter-reset: num var(--num); content: counter(num);；注意var(--num)必须是整数，99.6会被截断为99
别踩这些引号和转义坑
哪怕走attr()或counter()路线，引号和空格也极易翻车：
- 写
--tip: "✅"会导致content: var(--tip)变成content: ""✅""，语法非法；正确是--tip: ✅（无外层引号） - 含双引号的字符串要内部转义：
--quote: "他说:\"今天真好\""，不是"他说:"今天真好" - 连续空格会被合并，需保留时用
\00a0（不间断空格）或 - 中文长文本可直接存进变量，但文件编码必须是UTF-8，且编辑器不能自动转义成HTML实体（如
©在CSS里完全无效）
真正难处理的不是“怎么让它显示”，而是变量值在DevTools里看着像生效了，结果页面上什么都没有——这时候先查Computed面板里的content值是否存在，再确认伪元素是否被display: none或visibility: hidden意外压制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
