content中使用var()必须在CSS变量定义时用双引号包裹字符串值，如--tip: "✅"；JS动态设置需加外层引号：el.style.setProperty('--tip', '"新提示"')；IE不支持，兼容方案用attr(data-tip)；多层嵌套需统一在:root设置或内联伪元素样式；禁止calc()拼接或多个var()连写。
content里用var()必须加引号包裹字符串值
直接写content: var(--tip);在大多数浏览器里会失效——即使--tip定义的是"✓"，也会渲染成空或none。因为content只接受字符串字面量、attr()或计数器，var()返回的原始值不带引号，浏览器不认。
正确写法是把变量值本身用引号包住：content: var(--tip, "默认");，且这个--tip必须定义为带引号的字符串：
body {
--tip: "✅";
}
如果变量定义成--tip: ✅;（没引号），var(--tip)会被当成标识符而非字符串，导致解析失败或显示none。
- 所有含空格、括号、Unicode符号的值，都得在自定义属性定义时就加双引号
- JS动态设置时也要补上外层引号：
el.style.setProperty('--tip', '"新提示"'); - IE不支持
var()在content中使用，如需兼容，改用attr(data-tip)方案
JS修改content前必须确保父元素有style或:root作用域
var(--tip)的查找链是从当前元素向上冒泡到:root，所以如果只在某个组件内部设style.setProperty，但伪元素样式写在全局CSS里，可能读不到新值——因为全局规则里var()查的是:root，不是你改的那个DOM节点。
立即学习“前端免费学习笔记（深入）”；
两种可靠做法：
- 统一在
:root上设变量：document.documentElement.style.setProperty('--tip', '"运行中"'); - 或者把伪元素样式写进元素内联
style里（少见但可控）：el.style.cssText += '::before { content: var(--tip); }'; - 避免在多个嵌套组件里各自设同名变量，容易覆盖或作用域错乱
别用calc()或数学运算拼接content字符串
content: calc(var(--a) + var(--b));完全无效——calc()只处理数值，不能拼字符串；content也不支持+、concat()这类操作。
想实现“状态+文案”组合，只能提前定义好完整字符串变量：
.status.success::before { --tip: "✔ 已完成"; }
.status.error::before { --tip: "✘ 失败"; }
::before { content: var(--tip); }
或者用attr()配合JS切换data-tip更灵活。
- 不要试图用
var(--prefix) var(--suffix)连写，CSS不支持多var()拼接 - 字符串拼接只能靠预定义、类名切换、或HTML侧注入
- 需要大量组合文案时，
data-属性比CSS变量更易维护
调试时先用getComputedStyle确认变量是否生效
改了--tip却看不到效果？别急着重写CSS，先验证变量到底有没有被读到：
const el = document.querySelector('.target');
const before = getComputedStyle(el, '::before');
console.log(before.content); // 输出可能是 'none'、'"✅"' 或 '""'
如果输出none，说明var()没解析成功；如果是"✅"（带双引号），说明值已到位，问题在别的样式（比如display: none或visibility: hidden）。
-
getComputedStyle(el, '::before')返回的是计算后值，能真实反映浏览器行为 - 注意：该方法在伪元素无
content定义时也返回none，要先确保CSS里写了content - 服务端渲染或Shadow DOM中，变量作用域可能被隔离，需额外检查继承链
:root更新 → 伪元素用var(--x)引用 → 出问题优先用getComputedStyle看结果。绕开拼接、避开IE、少依赖深层作用域——这些地方最容易卡住半天。 
