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()读取：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 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面板再确认。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！