伪元素中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() 读取。
- HTML 中写：，CSS 中：
::after { content: attr(data-tip); }- JS 动态设置：
el.style.setProperty('--tip-text', '"✅"');不起作用——setProperty对content无影响- 更稳妥的做法：用 JS 同时更新
dataset.tip和style，确保视觉与语义一致为什么
:root定义了却在伪元素里读不到？检查这三点变量作用域没问题（
:root全局可用），但实际读不到往往卡在细节：立即学习“前端免费学习笔记（深入）”；
- 拼写错误：比如
var(--bg-color)但定义的是--bg-colour（英式拼写差异） - 覆盖顺序：后续样式表或内联
style重写了同名变量，且未用!important（!important在:root变量中无效） - 计算时机：变量值含单位缺失（如
--size: 12而非--size: 12px），用在font-size时会计算失败，回退到初始值
content的限制尤其硬性——别跟规范较劲，该用attr()就用，该交由 JS 控制就交出去。 - JS 动态设置：
