因为content只插入内容，不绘制图形；画图标需用border、border-radius等样式“手工建模”，且必须设display、宽高、定位，否则伪元素不渲染或失效。
为什么直接用content插字符画不出想要的图标
因为content本身只负责“插入内容”，不负责“绘制图形”。你写content: "★"，浏览器只是渲染一个 Unicode 字符；想画圆角矩形、三角箭头、搜索镜片这类结构化图标，得靠border、border-radius、transform这些样式在伪元素上“手工建模”。
常见错误是：只设了content: ""，却忘了给伪元素加display: block或position: absolute，结果宽高、定位全失效，图标“看不见但占位”。
-
content必须存在（哪怕为空），否则伪元素不渲染 - 想控制尺寸/位置，优先用
display: block+width/height，而不是依赖inline默认行为 - 复杂图标建议用
position: absolute脱离文档流，避免干扰父元素布局
用border和border-radius画三角形与圆环
这是最轻量、零资源依赖的绘图方式。原理是利用边框交汇点形成三角，再通过border-radius切出弧度。
比如画一个向右的播放箭头：
立即学习“前端免费学习笔记（深入）”；
button::before {
content: "";
display: block;
width: 0;
height: 0;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left: 10px solid #333;
}画一个带缺口的圆环（如加载指示器）：
.loading::before {
content: "";
display: block;
width: 20px;
height: 20px;
border: 2px solid #eee;
border-top-color: #007BFF;
border-radius: 50%;
animation: spin 1s linear infinite;
}- 纯
border三角形不支持抗锯齿，小尺寸下边缘可能发虚 -
border-radius: 50%配合border可模拟环形，但无法做出渐变色环 - 动画只能作用于整个伪元素，不能单独动某条边框
用background内联 SVG 替代图片请求
当border建模太复杂（比如齿轮、信封、放大镜），用background塞一个 data URI 格式的 SVG 最稳妥——无网络请求、可缩放、颜色用currentColor继承文字色。
例如画一个搜索图标：
.search::before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='8' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='m21 21-4.35-4.35' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") no-repeat center / contain;
margin-right: 6px;
}- SVG 中的
%23000要 URL 编码，否则解析失败 - 用
currentColor代替硬编码颜色，能随父元素color自动变色 - IE11 不支持 data URI 的 SVG，需单独 fallback
字体图标在::before里为什么不显示
不是字体没引入，而是三个关键点断了链路：font-family没匹配、content的 Unicode 错位、font-weight冲突。
以 Font Awesome 5 Free 为例，正确写法必须同时满足：
.icon-check::before {
content: "\f00c";
font-family: "Font Awesome 5 Free";
font-weight: 900; /* solid 图标必须是 900 */
font-style: normal;
color: #28a745;
}- Free 版本分
"Font Awesome 5 Free"（solid）和"Font Awesome 5 Pro"（pro），名字错一个字就挂 - solid 图标用
font-weight: 900，regular 图标用400，混用会显示方块 - 如果父元素设置了
font-weight: bold，伪元素会继承并叠加，导致图标变形
真正难调的不是“怎么画”，而是“怎么让画出来的图标在各种字号、行高、flex 容器里始终对齐且不被裁切”——这需要把vertical-align、line-height、transform: translateY()当成组合技来用，而不是单点调试。
