CSS变量可用于伪元素content，但必须确保值为带引号的字符串；否则类型不匹配会导致显示异常、解析错误或不渲染，推荐用attr()替代以提升稳定性和兼容性。
不能直接用 CSS 变量动态改变伪元素的 content，但可以——前提是变量值是字符串且带引号包裹，否则浏览器会当数字/颜色处理，导致显示异常或不渲染。
为什么 var(--text) 在 content 里常失效？
因为 content 对值类型极其敏感：它只接受字符串字面量、attr()、counter() 或 url()。CSS 变量本身无类型，--tip: "✅" 和 --tip: 123 都合法，但后者传给 content 就变成 content: 123，等效于 content: "123" —— 看似能用，实则丢失语义，且无法插入空格、引号等特殊字符。
常见错误现象：
-
content: var(--msg);编译后显示12而不是"12px"（单位丢失） -
content: var(--icon);显示✅正常，但改成--icon: "⚠️"后页面报错ParseError: invalid property name（引号未转义） - JS 设置
el.style.setProperty('--msg', 'New')，但伪元素没更新——漏了外层双引号
content: var(--x, "fallback") 的正确写法
必须确保变量值是带引号的字符串，且 JS 设置时也补上引号：
立即学习“前端免费学习笔记（深入）”；
- CSS 中声明：
:root { --notice: "⚠️ 注意"; }（注意双引号在:root内） - 伪元素使用：
.alert::before { content: var(--notice, "默认提示"); } - JS 动态改值：
document.documentElement.style.setProperty('--notice', '"已读"');（注意外层单引号 + 内层双引号） - 若变量来自 Vue reactive 数据，需在模板中用
:style="{ '--notice': `'${msg}'` }"保证引号嵌套正确
比 var() 更稳的替代方案：用 attr() + data 属性
当内容含空格、引号、emoji 或需频繁 JS 更新时，attr() 比 var() 更可靠，兼容性到 IE9：
- HTML：
<button class="btn" data-tip="保存成功">Save</button> - CSS：
.btn::after { content: attr(data-tip); opacity: 0.85; } - JS 修改：
btn.setAttribute('data-tip', '已保存 ✓');（无需引号转义，浏览器自动提取字符串） - Vue 中可直接绑定：
<button :data-tip="statusMsg"></button>
最易被忽略的一点：CSS 变量用于 content 时，不是“设了就能用”，而是“字符串格式必须精确匹配”。少一对引号、多一个空格、用单引号包双引号，都可能让整个伪元素内容消失或报错。别依赖浏览器自动纠错——它不会帮你补引号。
