伪元素插入图标前必须设置content属性，否则::after不会渲染；最常用content: ""，也可用Unicode字符、SVG文件或data URI内联SVG，配合background-image实现可控尺寸与高清适配。
伪元素
插入图标前必须设置 content 属性
不写
，
就不会渲染——这是最常被忽略的硬性前提。哪怕只写
，也得存在；空字符串才能让伪元素挂载样式，否则后续所有宽高、背景、边框都无效。
常见错误现象：
完全不显示，检查控制台也看不到该节点，八成是漏了
。
：最常用，适合纯装饰（如小圆点、箭头、分隔线）
：用 Unicode 字符快速实现简单图标（注意字体支持）
：可直接内联 SVG 文件，但需确保路径正确且服务支持 MIME 类型
用 background-image + inline-block 实现可控尺寸的图标
直接靠
插入图片时，无法缩放或居中；更稳妥的方式是把伪元素设为块级容器，用
承载图标资源。
这样能自由控制尺寸、重复方式、定位偏移，也兼容 CSS 变量和主题切换。
立即学习
“
前端免费学习笔记（深入）
”；
必须显式设置
或
，否则
/
无效
推荐用
或具体像素值（如
），避免拉伸失真
加
可对齐行内文本基线，减少跳动
使用 data URI 内联 SVG 避免额外请求
小图标（≤2KB）直接转成 data URI 嵌入 CSS，省去 HTTP 请求，也规避跨域或路径错误问题。但要注意 URL 编码——特别是
、
、空格等字符必须编码，否则解析失败。
常见错误：复制未编码的 SVG 到
中，浏览器报
或图标空白。
在线工具如
URL Encoder
可一键处理 SVG 源码
颜色建议用
替代
，
替代
替代
如果用 CSS 变量控制颜色，data URI 不支持动态替换，此时应改用
+
方案
伪元素图标在高 DPI 屏幕下的清晰度问题
用 PNG 或未适配的 SVG 图标，在 Retina 屏上容易发虚。根源在于未提供 2x 分辨率资源或未声明
。
单纯放大
/
会导致模糊，真正有效的解法是让图源本身具备矢量特性或提供多倍图。
优先用 SVG（天然矢量），并确保 viewBox 设置合理（如
）
若必须用位图，可用媒体查询提供 2x 版本：
慎用
模拟高清——会引发子像素渲染问题，边缘仍可能毛糙
真正简洁的图标不靠堆砌效果，而靠精准控制 content、尺寸与资源格式；最容易被忽略的是 content 的强制存在性，以及 SVG 在 data URI 中的编码完整性。
content::aftercontent: ""::aftercontentcontent: ""content: "✓"content: url(./icon.svg)content: url()background-imagedisplay: inline-blockblockwidthheightbackground-size: contain16px 16pxvertical-align: middlespan::after {
content: "";
display: inline-block;
width: 16px;
height: 16px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23666' d='M8 0a8 8 0 100 16A8 8 0 008 0zM5 8h6v2H5V8z'/%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
vertical-align: middle;
margin-left: 4px;
}#、>url()Invalid property value%23#%3C，%3E>maskbackground-colorbackground-sizewidthheightviewBox="0 0 16 16"@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)transform: scale(0.5)