伪元素颜色无法直接用CSS变量控制，需显式声明或通过类名切换；行内伪元素需设inline-block和vertical-align；深色模式建议用class而非媒体查询；currentColor仅继承父color且不可计算。
before伪元素里不能直接用变量控制颜色
CSS自定义属性（--color-primary）无法在::before的content里被计算，更不能靠JS动态改变量就自动重绘装饰块颜色——浏览器不会把变量值“注入”到伪元素的渲染流程中。常见错误是写content: var(--color-primary)，结果只输出字符串字面量，不是颜色效果。
实操建议：
- 颜色必须显式写死在伪元素的
background-color或border-color等样式里，比如::before { background-color: #3b82f6; } - 若需动态换色，得用JS切换类名，再通过不同类绑定不同
::before颜色，例如.theme-blue::before { background-color: #3b82f6; }+.theme-green::before { background-color: #10b981; } - 避免用
content: ""配合width/height造色块——IE11不支持content设为空字符串时渲染尺寸，得加display: block和明确尺寸
装饰块尺寸受父元素line-height和vertical-align影响
当::before用于行内元素（如）前做小色条，高度常莫名变高或错位。这不是颜色问题，而是伪元素默认display: inline，会参与行内格式化上下文，被line-height撑开、被vertical-align偏移。
实操建议：
- 强制设
::before { display: inline-block; vertical-align: middle; }，避免基线对齐干扰 - 若要精确控制高度（比如2px高色块），必须显式设
height和line-height: 0，否则继承父级行高 - 不要依赖
font-size: 0来消除间隙——某些字体仍会留白，vertical-align: top更可靠
伪元素颜色在深色模式下不会自动适配
用@media (prefers-color-scheme: dark)套::before时，容易漏掉选择器层级。写成div::before { background-color: white; } @media (prefers-color-scheme: dark) { div::before { background-color: black; } }看似合理，但若父元素本身有深色模式class（如dark），而你又没在媒体查询里重复声明该class，就会失效。
实操建议：
- 优先用class驱动主题，比如
.card::before和.card.dark::before，比媒体查询更可控 - 若坚持用
prefers-color-scheme，确保选择器完全一致，且伪元素样式未被更高优先级规则覆盖（检查Computed面板里的background-color来源） - 注意：Safari对
prefers-color-scheme作用于伪元素的支持较晚（iOS 13.4+），旧版本会回退到浅色
用currentColor实现有限度的颜色继承
currentColor是唯一能“穿透”伪元素并响应父元素文字颜色变化的值。但它只继承color属性，不能继承background-color或任意变量，也不支持计算（比如lighten(currentColor, 20%)在原生CSS里不存在）。
实操建议：
- 适合场景：图标装饰块、下划线、边框色，且希望与文字同色，例如
a::before { background-color: currentColor; width: 2px; height: 0.8em; } - 不适用场景：需要与背景对比、需明暗反差、或父元素
color为transparent或inherit时——此时currentColor可能无效 - 注意：若父元素
color是渐变或RGBa，currentColor取的是解析后的最终值，不是原始声明
事情说清了就结束。伪元素不是真DOM，所有“动态”都得靠外部触发；颜色装饰看着简单，实际卡在渲染层细节里最多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
