在纯前端开发里，不依赖图片文件也能实现不少基础图标效果。利用css的:before伪元素结合content属性，我们可以把字符、边框或者背景拼合成视觉图标，这种方式常用于箭头、关闭叉号、提示符号等简单图形。它最大的好处是随文字颜色变化、不增加网络请求，并且写起来非常直观。
一、:before与content的基本机制
伪元素:before用来在选中元素的内容之前插入一个生成盒子，这个盒子默认是行内元素。真正让它显示内容的，是content属性。如果缺少content，:before pseudo element就不会生成，自然也看不到任何东西。content可以接收字符串、计数器、attr()提取的属性值，以及url()引用的资源。
在制作图标时，我们多半用字符串形式，例如插入一个 unicode 字符。浏览器会把这个字符当作普通文本渲染，因此我们可以通过font-family、color、font-size来控制它的外观。下面是一段最基础的箭头图标代码：
.btn::before {
content: '2192'; /* 右箭头 unicode */
margin-right: 6px;
color: #2c7;
font-size: 14px;
}
上面代码中，反斜杠加四位十六进制是 css 字符串里的 unicode 写法。这样写比直接贴字符更稳定，不会出现文件编码导致的乱码。需要注意的是，伪元素生成的内容不在 dom 树里，屏幕阅读器默认可能忽略，所以对关键信息别只靠它表达。
二、用边框画出一个关闭图标
除了字符，我们也能完全不用文字，只用css画出图形。最常见的例子是关闭叉号。思路是让:before变成一个方块，利用两条旋转的四十五度边框线形成 x 形状。这种方法不依赖字体，任何环境显示一致。
下面示例展示如何为一个弹窗关闭按钮添加叉号。我们用绝对定位把伪元素放在按钮右上角，并用linear-gradient或者border来绘制线条。为了清晰，这里采用两个嵌套思路合并到:before里：
.close-btn {
position: relative;
width: 24px;
height: 24px;
}
.close-btn::before {
content: '';
position: absolute;
left: 50%;
top: 50%;
width: 16px;
height: 2px;
background: #333;
transform: translate(-50%, -50%) rotate(45deg);
}
.close-btn::after {
content: '';
position: absolute;
left: 50%;
top: 50%;
width: 16px;
height: 2px;
background: #333;
transform: translate(-50%, -50%) rotate(-45deg);
}
虽然标题只提:before，但实际叉号需要两条线，所以补了:after。如果坚持只用:before，也可以借助box-shadow或者多重背景实现，但可读性会下降。这个方案优点是无字体依赖、缩放清晰；缺点是代码量比字符方案多，且仅限几何图形。
三、content引用attr实现可配置图标
有时我们希望图标内容由 html 属性决定，比如不同按钮显示不同符号。这时可以用content: attr(data-icon)。伪元素会读取元素的data-icon属性值并当作文本插入。它特别适合做轻量图标字体替代。
使用方式如下，我们在标签上写data-icon，样式里统一控制外观。这样改图标只需改属性，不必动css：
<button class="ico" data-icon="★">收藏</button> <button class="ico" data-icon="✉">邮件</button>
.ico::before {
content: attr(data-icon);
margin-right: 4px;
font-size: 13px;
color: #e67;
}
这种写法把表现和内容适当分离，维护起来轻松。但要留意如果data-icon为空，content依然生成空字符串盒子，可能占微小空间，可用:empty或属性选择器规避。另外 attr 只能取字符串，不能拼装多个值，复杂图标还是要用svg。
四、常见问题与避坑
新手常遇到图标不显示，多半是漏写content，或者把:before写成:before但后面选择器写法错误。还有人直接用content: ">" 这类符号却忘了转义，在部分压缩工具里会出问题，建议统一用unicode写法。
另一个坑是伪元素默认继承父级字体，如果父级设置了特殊font-family，图标字符可能变方框。解决办法是给:before单独指定font-family，比如font-family: sans-serif。下表列出几种方案对比：
| 方案 | 优点 | 局限 |
|---|---|---|
| unicode字符 | 代码少、易改色 | 依赖字体、屏幕阅读不友好 |
| 边框绘制 | 无字体依赖、清晰 | 仅几何图形、代码多 |
| attr属性 | 可配置、易维护 | 只支持字符串 |
综合来看，用css :before与content制作图标适合轻量、统一的界面提示。若项目图标种类多且复杂，还是建议接入svg sprite或者图标字体，把伪元素方案留给最简单的装饰性符号。
css_beforecontenticon修改时间：2026-08-08 22:30:27