css变量在伪元素中能读取:root或祖先定义的变量，但必须经宿主元素继承传递；content属性不支持var()函数，属css规范限制；all: unset或all: initial会切断变量继承链。
CSS变量在伪元素中不生效，不是语法报错，而是变量根本没传进去——伪元素只继承宿主元素“计算完成”的属性值，不直接读取父级声明的--xxx变量。
伪元素能否读取:root或祖先定义的变量？
能，但前提是宿主元素自身必须参与继承链。例如：
-
:root { --color: #007acc; }→.box { color: var(--color); }→.box::after { background-color: var(--color); }✅ 成功，因为.box已继承并“携带”该变量 -
:root { --color: #007acc; }→.box::after { background-color: var(--color); }❌ 失败，.box自身没声明/继承--color，伪元素无源可溯
关键点：变量必须“流经”宿主元素，不能跳过它直通伪元素。
content里写var(--x)为什么总失败？
因为content属性根本不支持var()函数——这是CSS规范硬性限制，不是浏览器bug。
-
.btn::before { content: var(--icon); }→ 浏览器静默丢弃整条声明，Computed面板里content字段为空 - 合法写法只有：
content: "→"、content: attr(data-icon)、content: counter(item) - 想动态显示变量值？得靠JS同步：
el.setAttribute('data-icon', getComputedStyle(document.documentElement).getPropertyValue('--icon').trim())，再用attr(data-icon)
哪些操作会直接切断变量继承？
一旦宿主元素被重置，变量就断流，伪元素立刻失效。
-
all: unset→ 清空所有继承属性，包括--xxx自定义属性 -
all: initial→ 所有属性（含--xxx）设为初始值，变量值丢失 -
color: inherit配合all: unset→ 看似继承颜色，实则连变量定义都已被抹掉 - 宿主元素选择器优先级太低，被更高权重要求覆盖（如
!important规则重置了style内联变量）
调试时最该盯死的三个地方
别猜作用域，用开发者工具直击源头：
- 在
Elements面板悬停宿主元素 → 开::after过滤器 → 看Styles里var(--x)是否已解析为具体值（如#007acc），灰色未解析=变量未注入 - 切到
Computed面板搜索目标属性（如background-color）→ 看“Source”列指向哪条规则，若来源是user agent或reset.css，说明变量根本没生效 - 检查宿主元素的
content是否非none：没有content，伪元素盒模型就不创建，变量再对也白搭
真正卡住的往往不是变量名拼错，而是宿主元素在某一层被all: unset或inherit链意外截断——这种断连在Computed里毫无提示，只能靠逐层检查Styles面板确认变量是否真被宿主“拿到”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
