理解 CSS 伪元素的颜色与正文颜色差异
伪元素与普通文本的颜色继承机制
在CSS中，伪元素 ::before 和 ::after 是用来在选定元素的内容前后插入内容的工具。它们并非文本的一部分，而是文档渲染树的额外节点，因此它们的颜色并非自动与父元素文本颜色一致。默认情况下，伪元素的 color 会受到继承的影响，但具体行为取决于它们的 display、content、以及是否有显式颜色声明。
理解颜色的“继承”与“层叠”对伪元素至关重要。如果未设置 color，伪元素通常会继承父元素的 color，但当伪元素使用了 content 并通过定位或绘制层特别处理时，color 的实际应用可能被叠加在不同的渲染层上，导致看起来与正文不同。
文档流中的渲染层级与层叠上下文
伪元素属于父元素的渲染上下文的一部分。它们的绘制顺序通常在文本之前或之后，取决于 display 和 position。在复杂的层叠上下文中，color 还可能被 animation、filter、opacity 等属性影响，从而与主文本呈现不同。
另外，用户代理样式表对伪元素的一些默认处理也会影响颜色，例如在某些浏览器中，带有 content 的 ::before 可能需要显式设置 color，否则会显示为父元素 color 的偏移版本。
使用 ::before 与 ::after 设置 color 的实操技巧
基础用法与常见错误
要让伪元素的颜色与正文形成对比或保持一致，关键在于显式设置 color，并确保 content 属性存在。没有 content，伪元素不会被绘制，因此 color 设定无效。下面的示例展示了一个简单场景：
/* 基础基础示例：伪元素颜色设置 */
.box::before {content: "★";color: #e74c3c; /* 红色星星，独立于正文文本 */
}
.box {color: #2c3e50; /* 主文本颜色为深蓝 */
}
在这个例子中，伪元素的星星使用了自身的 color，即使父文本颜色不同，星星的颜色也固定。如果你希望伪元素颜色跟随父文本，可以省略 color 声明。
结合 content 属性和 display 属性的进阶用法
除了简单的文本内容，::before/::after 也可用作装饰性图标或占位符。对于这类场景，确保 content 非空且修改 display 与 position 时，颜色的计算才会按预期工作。以下示例在不改变正文文本的情况下，添加了一个虚拟的背景符号。
/* 进阶：伪元素作背景色块、不影响文本颜色 */
.card::before {content: "";display: inline-block;width: 12px;height: 12px;background: #3498db;margin-right: 6px;vertical-align: middle;color: inherit; /* 在某些场景下，确保 color 继承 */
}
.card {color: #333;
}
在这个场景中，color: inherit 确保伪元素的色调与文本一致，即使伪元素作为装饰，颜色仍然协调。如果需要对比色，需要独立设定 color。
兼容性与性能注意点
主浏览器对伪元素的 color 行为差异
不同浏览器对 ::before 与 ::after 的实现存在细微差异，在较旧的浏览器中可能需要前缀或额外的 CSS 规则以确保 color 生效。现代浏览器普遍对 color 的继承和层叠处理较为一致，但在复杂的动画或滤镜场景下，渲染结果仍可能不同。
为了提高可预测性，可以使用以下做法：给伪元素设置显式 color，并确保 content 非空，同时对父元素的 color 进行统一管理，避免混乱的层叠上下文。
性能优化实践
伪元素虽然轻量，但如果在大量元素上使用并频繁改变 color，可能会触发多次重排和重绘，影响页面性能。最佳实践是仅在需要时才使用伪元素，并尽量避免在关键路径上的复杂动画。
另外，使用简洁的选择器和合理的组合规则，可以帮助浏览器更高效地缓存和复用绘制结果，从而减少渲染成本。
