在css开发中，使用::before和::after伪元素制作小图标是一种非常实用的技巧，不需要引入额外的图片或者图标库，仅通过css属性就能实现多种常见的小图标效果，减少页面资源请求，提升加载效率。
核心原理
::before和::after是css中的伪元素，它们会在选中元素的内容前后插入生成的内容，默认情况下这两个伪元素是行内元素，不会显示任何内容。要制作小图标，需要给伪元素设置content属性，同时调整尺寸、边框、背景等属性，让伪元素呈现出我们需要的图标形状。
需要注意几个关键点：
- 伪元素必须设置
content属性，哪怕内容为空，否则伪元素不会生效 - 伪元素默认是行内元素，需要设置
display为块级元素或者行内块元素，才能设置宽高 - 可以通过
position定位调整伪元素的位置，让图标出现在目标元素的合适位置
基础属性搭配
制作小图标常用的css属性组合如下：
| 属性 | 作用 |
|---|---|
| content | 定义伪元素的内容，制作图标时通常设为空字符串 |
| width/height | 设置伪元素的宽高，决定图标的大小 |
| border | 通过边框的宽度和颜色，可以制作三角形、箭头等图标 |
| background | 设置伪元素的背景颜色或者渐变，实现实心图标效果 |
| transform | 对伪元素进行旋转、缩放等变换，调整图标的角度和形态 |
常见小图标实现示例
1. 三角形图标
三角形是最基础的图标之一，通过border属性就能实现，核心思路是给三个方向的边框设为透明，只保留一个方向的边框颜色。
/* 向下的三角形 */
.triangle-down {
position: relative;
width: 100px;
height: 100px;
}
.triangle-down::after {
content: '';
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 0;
height: 0;
/* 上边框有颜色，其他方向透明，形成向下三角形 */
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 15px solid #333;
border-bottom: 0;
}
2. 右箭头图标
右箭头可以通过两个边框旋转得到，利用border的两条边拼接成箭头的形状。
/* 右箭头 */
.arrow-right {
position: relative;
width: 100px;
height: 100px;
}
.arrow-right::after {
content: '';
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(45deg);
width: 12px;
height: 12px;
/* 右边框和下边框有颜色，旋转后形成右箭头 */
border-top: 2px solid #666;
border-right: 2px solid #666;
border-bottom: 0;
border-left: 0;
}
3. 关闭图标
关闭图标通常是两条交叉的线，可以用::before和::after分别制作一条线，然后旋转到交叉的角度。
/* 关闭图标 */
.close-icon {
position: relative;
width: 30px;
height: 30px;
cursor: pointer;
}
.close-icon::before,
.close-icon::after {
content: '';
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 2px;
background-color: #999;
border-radius: 1px;
}
/* 第一条线，不旋转 */
.close-icon::before {
transform: translate(-50%, -50%) rotate(45deg);
}
/* 第二条线，旋转90度，和第一条线交叉 */
.close-icon::after {
transform: translate(-50%, -50%) rotate(-45deg);
}
注意事项
使用伪元素制作小图标时，要注意伪元素的内容层级，避免被其他元素遮挡。如果图标需要响应点击事件，要注意伪元素本身不会触发事件，需要把事件绑定在宿主元素上。另外，复杂的图标不建议用伪元素制作，还是优先选择图标库或者svg，伪元素更适合实现简单的、轻量的小图标场景。