伪元素无法读取宿主css变量，因其无dom节点、仅继承计算后属性值而非变量本身；变量作用域不包含伪元素，需宿主显式声明，且all: unset等会切断继承链。
伪元素无法读取宿主的CSS变量，是因为变量没“流”过去
伪元素（::before、::after）本身没有DOM节点，它只继承宿主元素**计算后的属性值**，不直接访问宿主上定义的--xxx变量。如果宿主元素没声明该变量，或被all: unset、color: inherit等操作切断继承链，变量就到不了伪元素。
这不是浏览器bug，是CSS规范行为：变量作用域只存在于声明它的选择器及其后代，而伪元素不算“后代”，只是渲染附属物。
- 宿主元素必须显式声明变量，比如
.card { --text-color: #222; }，不能只靠:root定义后指望伪元素自动拿到 -
all: unset会清空包括--xxx在内的所有继承属性，伪元素立刻失联——哪怕宿主父级已定义 - 变量名严格区分大小写和连字符数量，
--Color≠--color，拼错一个字母就查不到
用inherit强制拉取计算值，但不是拉变量本身
inherit不是让伪元素“读取变量”，而是让它取宿主元素**该属性的计算结果**。比如宿主写了color: var(--text-color, #333)，那伪元素用color: inherit拿到的就是#333这个值，不是var(--text-color, #333)这个表达式。
- 适用于默认不可继承的属性，如
background-color、border、font-size - 对
content无效：content: inherit不会把宿主的content值传给伪元素（伪元素的content必须自己设） - 若宿主该属性值本身就是
unset或initial，inherit会继续向上找，可能落到:root或规范初始值，调试时得看Computed面板确认来源
content里不能用var()，这是语法错误
content属性只接受字符串字面量、attr()、counter()、counters()四类值，不支持var()。写content: var(--icon)会被浏览器静默丢弃，或报Invalid property value。
- 合法写法只有：
content: "✓"、content: attr(data-icon)、content: counter(step) - 想让伪元素显示变量内容，必须把变量值同步到HTML属性中，再用
attr()读取 - JS侧可这样同步：
el.setAttribute('data-icon', getComputedStyle(document.documentElement).getPropertyValue('--icon').trim()) - 编辑器或linter可能不报错，但运行时一定失效——以DevTools的Computed面板是否出现
content值为准
真正难处理的是“变量已定义，但不在查找路径上”
每次var(--x)失效，先问：这个伪元素的宿主元素，以及它的任意祖先（含自身），有没有在某个选择器里**显式声明过--x**？声明位置是否恰好落在它能“看到”的作用域内？
不要假设:root定义了就全局可用；不要以为父容器设了变量，子组件伪元素就能自动继承；更不要依赖all: initial之后还能读到变量——这些全是常见断点。
最稳的验证方式：打开DevTools → Elements面板 → 悬停宿主元素 → 右键Force state触发伪元素渲染 → 切到Styles面板过滤::after → 看目标属性右侧是否显示已解析的值（如#007acc），而不是灰色未解析的var(--x)。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
