使用CSS伪元素::before和::after可通过content属性在不改动HTML情况下为元素添加装饰图标或视觉效果，常用于按钮、列表等场景；需设置display类型并可结合字体图标、Unicode符号、背景图或border绘制图形；支持hover等状态交互并可添加过渡动画，实现轻量灵活的样式增强。
使用CSS伪元素 ::before 和 ::after 可以在不修改HTML结构的前提下，为元素添加装饰性图标或视觉增强效果。这种方式轻量、灵活，常用于按钮、列表项、提示信息等场景。
理解 ::before 与 ::after 基本用法
伪元素 ::before 和 ::after 允许你在目标元素的内部内容前或后插入生成的内容，这些内容只存在于CSS中，不会出现在DOM里。
关键点：
- 必须设置 content 属性，哪怕为空（content: ""）
- 默认是 inline 元素，通常需要设置 display: inline-block 或 block
- 可以设置宽高、颜色、边框、背景图、变换等样式
.title::before {
content: "";
display: inline-block;
width: 8px;
height: 8px;
background-color: #007acc;
border-radius: 50%;
margin-right: 8px;
vertical-align: middle;
}
使用字体图标或Unicode符号插入图标
通过 content 插入 Unicode 字符或配合图标字体（如 Font Awesome 或自定义字体），可实现简洁的装饰图标。
立即学习“前端免费学习笔记（深入）”；
- 使用 Unicode 示例：✓、→、★ 等
- 使用字体图标时，需先引入字体并设置 font-family
.list-item::before {
content: "✓";
font-family: Arial, sans-serif;
color: green;
margin-right: 6px;
font-weight: bold;
}
使用 Font Awesome 图标（通过其提供的 Unicode）.icon-check::before {
content: "\f00c"; /* FA 的对勾图标编码 */
font-family: "Font Awesome 5 Free";
font-weight: 900;
display: inline-block;
width: 1em;
text-align: center;
margin-right: 0.5em;
}
结合背景图或渐变创建图形图标
如果不想依赖字体或字符，可以用伪元素绘制简单图形，比如小三角、装饰线、圆环等。
- 利用 border 模拟箭头
- 用 background-gradient 创建光点或阴影效果
- 配合 transform 实现旋转或偏移
.btn-next::after {
content: "";
display: inline-block;
width: 6px;
height: 6px;
border-right: 2px solid #333;
border-top: 2px solid #333;
transform: rotate(45deg);
margin-left: 6px;
position: relative;
top: -1px;
}
控制显示与交互状态
伪元素也可以响应:hover、:focus等状态，实现动态装饰效果。
- 悬停时显示隐藏图标
- 点击后改变图标形态
- 配合 transition 添加动画
.link-external::after {
content: "↗";
font-size: 0.8em;
opacity: 0;
margin-left: 4px;
transition: opacity 0.3s;
}
.link-external:hover::after {
opacity: 1;
}
基本上就这些。合理使用 ::before 和 ::after 能让页面细节更丰富，同时保持HTML干净。关键是控制 content、display 和定位，再搭配字体、背景或边框技巧，就能实现各种轻量级装饰图标。不复杂但容易忽略。
