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