使用color属性可为::before和::after伪元素设置文字颜色，需确保content存在且display合适；背景色用background-color，边框色用border-color。

要为css伪元素 ::before 和 ::after 设置颜色，直接使用 color 属性即可。它们的颜色继承方式与普通元素一致，但必须确保伪元素已正确创建并显示。

1. 使用 color 属性设置文字或符号颜色

如果 ::before 或 ::after 插入的是文本内容（如通过 content 属性），使用 color 来设置其颜色。

 .element::before {   content: "★";   color: red;   display: inline; /* 默认是 inline，可省略 */ } 

2. 设置边框或背景颜色

伪元素也可以有背景色或边框，适用于装饰性图形或提示标记。

腾讯元宝

腾讯混元平台推出的AI助手

223

查看详情

 .tip::after {   content: "";   width: 6px;   height: 6px;   background-color: green;   display: inline-block;   margin-left: 5px; } 

3. 注意 display 和 content 的必要性

伪元素必须包含 content 属性，否则不会显示。同时，若需要设置宽高或背景，通常需设置 display 为 block、inline-block 等。

立即学习“前端免费学习笔记（深入）”；

• content 可为空字符串（””），用于纯样式装饰
• color 仅影响文字/字符内容，不影响背景或边框
• background-color 控制填充区域颜色
• border-color 控制边框颜色

基本上就这些，关键是 content 存在且 display 合适，color 才能起作用。

以上就是