<p>content 属性语法上不支持 var()，浏览器会静默忽略或标为无效；其他如 color、font-size 等属性只要变量有效即可正常计算；需动态文字内容应使用 attr() + data- 属性方案。</p>
不是“不生效”，而是你试图在 content 里用 var() —— 这从语法上就不被允许，浏览器会静默忽略或报 Invalid property value。真正在伪元素中“失效”的，只有 content: var(--x) 这一种写法；其他如 color、font-size、background-color 等属性，只要变量定义有效，就完全能正常计算。
content 属性根本不支持 var() 语法
CSS 规范明确限定 content 只接受：string 字面量、attr()、counter()、counters()。它不参与 CSS 自定义属性的运行时计算，也不支持字符串拼接或插值。
- 哪怕你在
:root定义了--icon: "★"，写content: var(--icon)仍是非法的 - 部分编辑器（如 VS Code + stylelint）会提前标红，但 Chrome/Firefox 往往只在 DevTools 的 Styles 面板里显示为 strike-through，容易误判为“兼容性问题”
- Edge 75–78 在伪元素中读不到局部作用域的变量，是竞态 bug；但即使在最新 Chromium 中，
content: var(--x)也一样不合法 —— 这是规范层级的限制，不是浏览器实现差异
伪元素中真正能用 var() 的地方
只要属性本身支持计算（即属于「可继承」或「可动画」的 CSS 属性），var() 就能照常工作。关键看属性是否在 CSS Typed OM 的 computed 范围内。
- ✅ 支持：
color: var(--text-primary)、font-size: var(--font-md)、border-color: var(--border-light)、transform: scale(var(--scale-factor)) - ❌ 不支持：
content、display、z-index（虽可设值，但无中间状态）、font-family（不可动画，且不参与计算流） - ⚠️ 注意单位：如果变量存的是纯数字（如
--size: 12），直接用于font-size: var(--size)会失效；得写成--size: 12px或用calc(var(--size) * 1px)
需要动态文字内容？别硬套 var()，换方案
想让伪元素显示 JS 控制的文本（比如 tooltip、图标 label、状态提示），var() 不是路径，attr() + data- 才是标准解法。
立即学习“前端免费学习笔记（深入）”；
- HTML 中加
data-tip="保存成功"，CSS 写::after { content: attr(data-tip); } - JS 修改时用
el.dataset.tip = "已复制"，无需 touch CSS 变量 - 如果必须用变量驱动样式+文字（如主题色+对应文字），建议拆成两层：CSS 变量控颜色/尺寸，
data-控文字，避免强耦合 - 极端场景（如需富文本或复杂逻辑）直接用 JS 插入
Text节点或span，比死磕伪元素更可控
最常被忽略的一点：开发者总在 content 上卡住，然后回头怀疑变量作用域、浏览器版本、甚至 webpack loader 配置——其实只要打开 DevTools，点开伪元素的 Styles 面板，看到 content: var(--x) 是灰色 strikethrough，就该立刻转向 attr() 方案，而不是继续调变量定义位置。
