content: url()插入SVG常失败，根本原因是伪元素无固有尺寸且不支持尺寸控制，必须显式设置width/height和display: inline-block；含外部引用或内联样式的SVG会静默失败，推荐改用background-image+content: ""方案。
content: url() 插入 SVG 为什么经常失败
直接写 content: url("icon.svg") 看似最直白，但实际中图标常为空白、拉伸变形，甚至 Elements 面板里都看不到节点。根本原因不是路径错，而是：::before 默认是 display: inline，没有固有尺寸，content: url() 不会自动赋予宽高——它只负责“加载”，不负责“撑开”。一旦没设 width/height 和 display: inline-block，伪元素就塌陷为 0×0。
更隐蔽的问题：icon.svg 若含 <style>、<script>、外部 <use href> 或未声明 viewBox，浏览器会静默失败，控制台零报错。本地开发时路径也以 CSS 文件位置为基准，不是 HTML 页面位置。
- 必须显式写
display: inline-block（仅靠content不够） -
width和height得用具体值（如16px），不能依赖font-size - 避免使用带内联样式、JS 或外部引用的 SVG 源文件
- 线上部署时注意 CORS：SVG 放 CDN 上，
content: url()可能被拦截
用 background-image + content: "" 才真正可控
把 SVG 当背景图塞进 ::before，是目前最稳定、兼容性最好（IE9+）、缩放/定位/颜色适配最灵活的方案。关键在于：必须配合 content: "" 触发伪元素生成，再用 background-image 覆盖内容区。
示例中 fill='%23007acc' 的 %23 是 # 的 URL 编码，确保颜色可内联；background-size: contain 保持比例，background-repeat: no-repeat 防止平铺。
立即学习“前端免费学习笔记（深入）”；
li::before {
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='%23007acc' d='M8 0c-4.42 0-8 3.58-8 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zm-1 12l-4-4 1.41-1.41L6.83 9.17l7.59-7.59L16 0l-9 9z'/%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
margin-right: 8px;
}
-
content: ""必须存在，否则伪元素不渲染 -
background-size: contain适合等比缩放；cover适合填满容器（可能裁切） - 颜色改起来方便：只需改 URL 中的
%23007acc，不用动 SVG 文件 - 支持
background-position微调偏移，比top/left更稳
字体图标和 SVG 图标不能混着配样式
用 Font Awesome 这类字体图标时，content 里写的是 Unicode 码点（如 \f00c），但光有这个远远不够。它完全依赖字体文件加载和样式匹配——漏掉 font-family 或 font-weight，出来的就是方框或系统默认字符。
而 SVG 图标走的是图像路径或 data URL，跟字体无关。两者混用一套 CSS 规则（比如只设 color 却不设 font-family），必然出问题。
- Font Awesome 6 Solid 图标必须配
font-weight: 900，Regular 则是400 -
font-family名称必须和@font-face定义完全一致（包括空格、“Free”后缀、大小写） - SVG 方案里
color对图标无效，得靠 URL 编码或background-color（仅限纯色块） - 别在同一个
::before里既写content: "\f00c"又写background-image——后者会覆盖前者
伪元素图标永远不可访问、无 DOM、不响应事件
这是规范决定的，不是兼容性问题。::before 插入的内容不在真实 DOM 树中，所以：
- 屏幕阅读器完全感知不到，
aria-label加在宿主元素上也救不了它 -
document.querySelector("::before")查不到，getComputedStyle(el, "::before")才能读样式 - 无法直接绑定
click或hover，pointer-events: auto也不起作用（默认就是none） - 功能性图标（如「必填」星号、「错误」叉号）必须用真实 HTML 元素，再辅以 ARIA 属性
装饰性场景（分隔线、小圆点、箭头）才适合伪元素；一旦涉及语义、交互或可访问性要求，就得退回到真实标签。
