content属性不支持var()，因其仅接受字符串字面量、attr()、counter()等，而color、font-size等支持计算的属性可用；需用data属性+attr()或js同步实现动态文字。
不能在 content 里直接用 var()，但其他支持计算的属性（如 color、font-size）完全可用。
为什么 content: var(--icon) 总是不生效？
这不是浏览器兼容问题，而是 CSS 规范明确禁止：content 只接受字符串字面量、attr()、counter() 和 counters()。哪怕你写了 --icon: "★"，var(--icon) 在 content 中仍会被静默忽略或报 Invalid property value 错误。
常见误判点：
- 编辑器（如 VS Code + stylelint）提前标红，但浏览器没报错，让人误以为“只是没刷新”
- 变量本身拼写正确、作用域也没问题，但卡在
content的语法硬限制上 - 试图写
content: var(--prefix) "text"—— CSS 不支持字符串拼接，var()无法参与连接运算
var() 在伪元素中真正能用的属性有哪些？
只要该 CSS 属性支持计算值（即能参与 calc() 的属性），var() 就能用。伪元素（::before / ::after）对此无额外限制。
典型可用属性：
-
color、background-color、border-color -
font-size、line-height、opacity -
transform（如scale(var(--scale))）、margin/padding（前提是变量带单位，如--space: 0.5rem） -
animation-delay: var(--delay)（配合calc()可做序列动画）
关键提醒：变量值必须带单位（如 --size: 12px），否则用在 font-size 等地方会计算失败，回退到初始值。
想让伪元素“显示变量定义的文字”，怎么办？
唯一可靠路径是把变量值同步到 HTML 属性，再用 attr() 读取。CSS 不提供“变量转字符串内容”的通道。
实操建议：
- 用 JS 设置：
el.dataset.tip = "✅";，然后写::after { content: attr(data-tip); } - 避免只改 CSS 变量：
el.style.setProperty('--tip-text', '"✅"');对content完全无效 - 如果多个元素共用同一变量值，可在父容器上设
data-tip，子伪元素统一读取 - 需要响应式或主题切换时，JS 同步更新
dataset和style，确保语义与视觉一致
伪类（如 :hover）里用 var() 有什么坑？
伪类本身不影响变量继承，但容易因细节失效：
- 变量名大小写/拼写不一致（
--bg-colourvs--bg-color），浏览器静默回退 - 在局部选择器（如
.card）里声明变量，但:hover目标不在其后代链中 - 用了
all: unset或inherit: none，中断了自定义属性继承链 - 推荐始终在
:root声明全局变量 —— 它比html更稳定，尤其在 Shadow DOM 或组件库嵌套场景下
复杂点在于：变量是否生效，不取决于“在哪写”，而取决于“在哪算”。一个分号遗漏、单位缺失、大小写错误，都可能导致整条声明被丢弃，后续 var() 查不到有效值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
