伪元素::before和::after的颜色控制主要通过color属性实现，适用于文本内容。1. 使用color属性可直接为文本型content设置颜色，如五角星显示红色；2. 背景和边框颜色需用background-color和border单独设置；3. 伪元素可通过color: inherit继承父元素文字颜色；4. color仅对文本内容生效，引用图片时无效。
伪元素 ::before 和 ::after 的颜色控制，主要通过 CSS 中的 color 属性来实现。只要伪元素的内容（content）是文本，就可以像普通元素一样设置文字颜色。
1. 使用 color 属性设置文字颜色
伪元素生成的内容如果是文本，可以通过 color 属性直接上色：
.element::before {
content: "★";
color: red;
}
这里的五角星（★）会显示为红色。color 控制的是伪元素内部文本内容的前景色。
2. 背景色和边框颜色设置
如果想给伪元素整体上色，比如背景或边框，使用对应属性：
.element::after {
content: "提示";
background-color: yellow;
border: 1px solid gray;
color: blue;
}
这里分别设置了背景色、边框色和文字颜色，各自独立控制。
3. 继承父元素颜色
伪元素可以继承父元素的颜色，适用于希望保持样式一致的场景：
.element {
color: green;
}
.element::before {
content: "→";
color: inherit; /* 继承父元素文字颜色 */
}
此时箭头会显示为绿色，与父元素一致。
4. 注意 content 内容类型的影响
color 属性只对文本内容生效。如果 content 引用的是图片，则 color 不起作用：
.element::before {
content: url(icon.png); /* 图片不受 color 影响 */
}
但如果是 Unicode 字符、字符串等文本型 content，color 就能正常控制颜色。
基本上就这些。只要伪元素包含的是文本内容，用 color 就能轻松上色，和其他文本样式规则完全一致。
