为什么CSS变量在Firefox 143中伪元素继承失败？

CSS变量在伪元素中content属性不支持var()，是规范限制而非继承失败；content仅接受attr()、counter()等特定函数及字符串字面量，其他属性如color、font-size则正常支持var()。

Firefox 143（2026年8月最新版）中 CSS 变量在伪元素里“继承失败”，绝大多数情况不是继承问题，而是你误用了 content 属性——它语法上就不支持 var()，浏览器静默忽略，看起来像“变量没传过去”，实则是根本没执行。

content: var(--x) 在 Firefox 143 中依然非法

即使变量定义在 :root、作用域正确、拼写无误，content: var(--icon) 这行声明在 Firefox 143（以及所有主流浏览器）中仍被解析为无效值。DevTools 的 Styles 面板会把它划掉，但不报错；控制台也无提示，容易误判为“兼容性退化”或“继承中断”。

1. content 属性只接受：attr()、counter()、counters() 和字符串字面量（如 "★"），不参与 CSS 自定义属性的运行时计算
2. 哪怕 --icon: "★" 定义得再规范，content: var(--icon) 仍是语法错误，不是“Firefox 没实现”，是规范禁止
3. VS Code + stylelint 等工具会提前标红，但 Firefox DevTools 默认只 strike-through，需手动点开“Computed”标签页确认 content 值是否为 none

其他属性如 color / font-size 在 ::before 中完全能继承变量

只要伪元素选择器合法（如 p::before）、变量定义有效、且属性本身支持计算（即属于 Typed OM 的 computed 属性），Firefox 143 对 var() 的支持毫无问题。

1. ✅ 正常工作：color: var(--text-primary)、font-size: var(--font-sm)、background-color: var(--bg-surface)
2. ⚠️ 注意单位：若变量存的是纯数字（如 --size: 14），直接用于 font-size: var(--size) 会失效；必须写成 --size: 14px 或用 font-size: calc(var(--size) * 1px)
3. ❌ 不要尝试：display: var(--mode)、z-index: var(--layer)——这些属性不可动画、不参与计算流，var() 无效且静默丢弃

需要动态文字内容？别碰 content + var()，改用 attr() + data-

当你要让伪元素显示 JS 控制的文本（比如状态提示、tooltip 文案、图标 label），硬套 var() 是死路；attr() 才是标准解法，且 Firefox 143 支持完美。

1. HTML 中加 data-status="已提交"，CSS 写 button::after { content: attr(data-status); }
2. JS 修改时只需 btn.dataset.status = "处理中"，无需触碰 CSS 变量或重写样式
3. 若需同时驱动颜色和文字（如主题色+对应文案），建议拆开：CSS 变量控样式，data- 属性控文案，避免强耦合和跨浏览器歧义

最常被忽略的一点：开发者一看到伪元素里文字没变，就回头检查变量作用域、:root 定义、甚至怀疑 Firefox 更新破坏了继承机制——其实问题从第一行 content: var(--x) 就已注定，跟继承无关，跟浏览器版本也无关。