CSS 变量在伪元素的 content 属性中不支持 var()，这属于 CSS 规范限制，并非变量继承失效；content 只接受 attr()、counter() 等特定函数以及字符串字面量，而像 color、font-size 这类属性则可以正常使用 var()。

在 Firefox 143（2026 年 8 月最新版）中，很多人以为 CSS 变量在伪元素里“继承失败”，但大多数情况下并不是继承出了问题，而是误把 var() 用在了 content 属性上——该属性在语法层面本身就不支持 var()。浏览器通常会静默忽略这条声明，所以看起来像“变量没有生效”，实际上是这段代码从一开始就不会被执行。

content: var(--x) 在 Firefox 143 中依旧属于无效写法

即使变量已经在 :root 中定义，作用域完全正确，变量名称也没有拼写错误，content: var(--icon) 这条声明在 Firefox 143（以及当前所有主流浏览器）中仍会被解析为无效值。DevTools 的 Styles 面板通常会把它划掉，但不会明确报错；控制台也往往没有任何提示，因此非常容易被误判为“浏览器兼容性问题”或“伪元素变量继承中断”。

• content 属性仅接受：attr()、counter()、counters() 以及字符串字面量（如 "★"），不会参与 CSS 自定义属性的运行时计算
• 即便 --icon: "★" 的定义完全规范，content: var(--icon) 依然是语法错误；这不是 Firefox 没支持，而是 CSS 规范明确禁止
• VS Code、stylelint 等前端开发工具通常会提前标红；而 Firefox DevTools 默认只是 strike-through，建议手动打开“Computed”标签页，确认最终的 content 值是否变成了 none

其他属性如 color / font-size 在 ::before 中仍可正常使用 CSS 变量

只要伪元素选择器写法正确（例如 p::before）、变量本身定义有效，并且目标属性支持计算，Firefox 143 对 var() 的支持并没有问题，伪元素中的样式变量继承也能正常工作。

• ✅ 可正常生效：color: var(--text-primary)、font-size: var(--font-sm)、background-color: var(--bg-surface)
• ⚠️ 注意单位问题：如果变量保存的是纯数字（如 --size: 14），直接写成 font-size: var(--size) 会失效；应改为 --size: 14px，或者使用 font-size: calc(var(--size) * 1px)
• ❌ 不建议尝试：display: var(--mode)、z-index: var(--layer)——这些属性在此类场景下可能不会按预期计算，var() 失效后也通常会被静默丢弃

需要动态文本内容？不要用 content + var()，应改用 attr() + data-

如果你希望让伪元素展示由 JavaScript 动态控制的文字内容，比如状态提示、tooltip 文案或图标标签，那么强行使用 var() 并不可行；标准且兼容性良好的方案是使用 attr()，而 Firefox 143 对这种写法支持完善。

• 可在 HTML 中添加 data-status="已提交"，然后在 CSS 中写 button::after { content: attr(data-status); }
• 当 JS 需要更新内容时，只需执行 btn.dataset.status = "处理中"，无需修改 CSS 变量，也不用重写样式规则
• 如果还需要同时控制颜色和文本（例如主题色搭配对应文案），最佳实践是拆分职责：CSS 变量负责样式，data- 属性负责文字内容，避免耦合过深并减少跨浏览器歧义

最容易被忽视的一点是：开发者一旦发现伪元素中的文字没有变化，往往会立刻回头排查变量作用域、:root 定义，甚至怀疑 Firefox 更新破坏了继承机制——但实际上，问题从第一行 content: var(--x) 开始就已经确定了，它与变量继承无关，也和浏览器版本更新无关。