使用::before伪元素可高效添加装饰图标。1. 通过content插入Unicode字符，设置color、font-size等样式；2. 结合Font Awesome等字体库，用font-family调用图标；3. 利用currentColor和em单位实现颜色与尺寸的灵活适配，提升视觉一致性。
在CSS中使用::before伪元素添加装饰性图标，是一种不依赖HTML结构修改的高效方式。通过它，你可以为任意元素前插入图标或图形，并自由控制颜色、大小等样式，特别适合用于列表项、链接或标题前的视觉点缀。
1. 使用content和Unicode字符添加图标
::before必须配合content属性使用，最简单的方式是插入Unicode符号作为图标，比如箭头、星号或字体图标中的特定字符。
- 用
\转义Unicode值，例如\2713表示对勾 ✔ - 设置
display: inline-block便于控制尺寸 - 使用
color定义图标的颜色 - 通过
font-size调整图标大小
示例代码：
.icon::before {
content: "\2713";
color: #4CAF50;
font-size: 16px;
margin-right: 8px;
display: inline-block;
}
2. 结合自定义图标字体（如Font Awesome）
若项目引入了图标字体库（如Font Awesome），可利用其提供的类名机制，在::before中直接使用对应的Unicode。
立即学习“前端免费学习笔记（深入）”；
以Font Awesome为例，假设你想添加一个星形图标（★）：
.star::before {
content: "\f005"; /* Font Awesome 的 star 图标编码 */
font-family: "Font Awesome 5 Free";
font-weight: 900;
color: gold;
font-size: 20px;
margin-right: 6px;
}
确保正确引入字体资源，否则图标无法显示。
3. 控制颜色与大小的灵活性技巧
为了让图标样式更灵活，可以结合CSS变量或继承父元素颜色，实现主题适配。
- 使用
currentColor让图标颜色自动匹配文本色 - 设置相对单位（如em）使图标大小随上下文缩放
- 利用
transform: scale()微调尺寸
示例：跟随文本颜色变化
.label::before {
content: "•";
color: currentColor;
font-size: 1.2em;
margin-right: 0.5em;
}
这样无论.label的文字是什么颜色，前面的圆点都会保持一致。
注意点：
::before生成的内容属于“装饰性”用途，不适合放置关键信息，以免影响可访问性。若图标有语义作用（如警告、成功提示），建议结合aria-label或实际HTML元素增强无障碍支持。
基本上就这些，掌握content、font-family、color和font-size四个核心，就能灵活控制伪元素中的装饰图标。
