content属性不支持var()函数，仅接受字符串字面量、attr()、counter()和counters()；伪元素中使用var(--icon)属语法错误，浏览器会静默忽略或报Invalid property value。
content属性不支持var()函数
直接在::before或::after的content里写var(--icon)一定失效——这不是兼容性问题，是CSS规范明确禁止的行为。浏览器会静默忽略该声明，或报Invalid property value错误。即使:root已定义--icon: "★"，content: var(--icon)依然非法。
哪些值能用在content里
content只接受四类值：string literal（字符串字面量）、attr()、counter()、counters()。它不参与CSS计算，也不支持变量插值。
-
content: "✓";✅ 合法 -
content: attr(data-label);✅ 合法（需HTML有data-label="New"） -
content: counter(item);✅ 合法 -
content: var(--label);❌ 语法错误，被丢弃
想让伪元素“显示”变量值，只能绕过content
变量本身可以正常用于伪元素的其他属性（如color、background-color、font-size），但若目标是动态文字内容，必须把变量值同步到HTML属性中，再用attr()读取：
- JS设置：
el.setAttribute('data-icon', getComputedStyle(document.documentElement).getPropertyValue('--icon').trim()); - CSS使用：
::before { content: attr(data-icon); } - 别试图拼接：
content: "→ " var(--label);—— CSS不支持字符串连接，var()不能出现在字符串中间
编辑器和Lint工具容易误导你
部分编辑器（如VS Code + CSS Peek）或stylelint可能不会标红content: var(--x)，甚至显示“已识别变量”，但这只是静态分析误判。浏览器运行时仍会跳过它。最可靠验证方式：打开开发者工具 → Elements面板 → 找到伪元素 → 看content是否出现在Computed标签页里；如果没出现，说明已被丢弃。
立即学习“前端免费学习笔记（深入）”；
真正难处理的不是“怎么写”，而是“为什么看起来像生效了”——比如变量定义和attr()值恰好一致，或缓存导致旧样式残留。每次改动后硬刷新（Ctrl+Shift+R）并清空Computed面板再确认。
