content属性不支持var()函数，浏览器会静默丢弃该声明；它仅接受字符串、attr()、counter()、counters()四类值；伪元素显示变量值需用attr()配合js将变量值写入html属性。
content属性根本不支持var()函数
写content: var(--icon)一定会失效，不是浏览器兼容性问题，是CSS规范明确禁止的行为。浏览器会静默丢弃整条声明，DevTools里content字段直接为空或显示为strike-through。它只接受四类值："字符串"、attr()、counter()、counters()——var()不在其中。
常见错误现象包括：
-
.btn::before { content: var(--label); }渲染出字面量"var(--label)"而非变量值 -
伪元素完全不显示（连空盒都没有），因为声明被丢弃后
content退化为none - 编辑器没报错，但Computed面板里查不到
content的最终计算值
想让伪元素显示变量值，必须用attr() + JS同步
变量本身可以用于color、background-color等属性，但要动态输出文字内容，只能把值“搬运”到HTML属性中，再用attr()读取。
实操步骤：
- JS侧：用
getComputedStyle(document.documentElement).getPropertyValue('--icon').trim()取值，再调用el.setAttribute('data-icon', value) - CSS侧：
.btn::before { content: attr(data-icon); } - 别写
content: "→ " var(--label)——CSS不支持字符串拼接，var()不能出现在字符串中间
伪元素不渲染，可能根本不是变量的问题
很多“变量不起作用”的表象，其实是伪元素压根没生成。只要content为none、normal、unset，或干脆没声明，伪元素就不会进入渲染树。
务必确认：
- 宿主元素已显式设置
content: ""或content: " "（引号必须是英文） - 若用
attr(data-x)，对应HTML属性必须存在且非空，比如<button data-icon="✓"></button> - 临时加
border: 1px solid red，能立刻验证伪元素是否真被创建并定位
all: unset或继承链断裂，会让变量“消失”得毫无痕迹
即使:root定义了--color，如果宿主元素写了all: unset，它连--color这个自定义属性都会被清空，伪元素就彻底失去源头。
调试时最该盯住的不是变量名拼错，而是：
- 在Elements面板悬停宿主元素 → 开
::after过滤器 → 看Styles里var(--x)是否已解析成具体值（如#007acc） - Computed面板搜索目标属性 → 看“Source”列是否指向你写的规则，还是
user agent或重置样式 - 宿主元素是否被更高优先级规则覆盖（比如
!important重置了内联style里的变量）
var()写错了，而是content属性被规范锁死，又没意识到伪元素依赖content才能活过来。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
