伪元素中content属性不支持var()，因其仅接受字符串字面量、attr()、counter()等，变量须用于color、font-size等支持计算的属性；动态文字需通过data属性+attr()或JS同步控制。
伪元素里用 var() 报错或失效的常见原因
直接在 ::before 或 ::after 的 content 里写 var(--color) 是无效的——CSS 规范明确禁止在 content 中使用 var()，浏览器会静默忽略或报解析错误（如 Invalid property value）。这不是兼容性问题，而是语法限制。
-
content只接受字符串字面量、attr()、counter()和counters()，不支持变量计算 - 即使
:root已定义--icon: "★"，content: var(--icon)仍不合法 - 部分编辑器或 Lint 工具（如 stylelint）会提前标红，但浏览器未必报错，容易误以为“生效了”
:root 变量如何在伪元素中真正起作用
只能把变量用在伪元素支持的属性上，比如 color、background-color、border-color、font-size 等。关键在于：变量必须落地为「可计算的 CSS 值」，而非试图注入到 content 字符串中。
- 正确示例：
::after { color: var(--text-primary); font-size: var(--font-sm); } - 若需动态文字内容，得靠 JS 注入
data-属性，再用attr(data-icon)拼接（attr()支持字符串，但不支持变量） - 不要试图用
var(--icon) "text"这类拼接——CSS 不支持字符串运算，var()不能参与连接
想让伪元素显示变量值？绕过 content 的实用方案
真要让伪元素“显示”变量定义的字符串（比如图标符号、提示文案），唯一可靠路径是把变量值同步到 HTML 属性中，再由 attr() 读取。
