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 面板会把它划掉，但不报错；控制台也无提示，容易误判为“兼容性退化”或“继承中断”。
-
content属性只接受：attr()、counter()、counters()和字符串字面量（如"★"），不参与 CSS 自定义属性的运行时计算 - 哪怕
--icon: "★"定义得再规范，content: var(--icon)仍是语法错误，不是“Firefox 没实现”，是规范禁止 - VS Code + stylelint 等工具会提前标红，但 Firefox DevTools 默认只 strike-through，需手动点开“Computed”标签页确认
content值是否为none
其他属性如 color / font-size 在 ::before 中完全能继承变量
只要伪元素选择器合法（如 p::before）、变量定义有效、且属性本身支持计算（即属于 Typed OM 的 computed 属性），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-
当你要让伪元素显示 JS 控制的文本（比如状态提示、tooltip 文案、图标 label），硬套 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) 就已注定，跟继承无关，跟浏览器版本也无关。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
