content: url()插入SVG不显示或尺寸失控，根本原因是伪元素无固有尺寸且不支持background-size等控制，必须显式设置width/height、display:inline-block，并避免含外部引用或内联样式的SVG；推荐改用background-image+content:""方案更可控。
为什么content: url()插入SVG后图标不显示或尺寸失控
直接用content: url("icon.svg")是最直观的做法，但实际中常遇到图标空白、拉伸变形、或完全不渲染。根本原因在于：浏览器对content: url()里的SVG不支持background-size、color等控制，且默认按原始宽高渲染，而伪元素本身没有固有尺寸——若没显式设width/height，它可能塌陷为0×0。
更麻烦的是，某些SVG文件含viewBox但无width/height属性，或用了外部引用（如<use href>），content: url()会静默失败，控制台也不报错。
- 必须给
::before显式设置display: inline-block（不能只靠content） -
width和height要写具体值（如16px），不能依赖font-size或line-height - 避免使用含
<style>、<script>或外部资源的SVG——content: url()只加载静态内容 - 本地开发时路径需相对于CSS文件位置，不是HTML位置；线上部署注意CORS（尤其SVG放在CDN时）
用background-image替代content: url()更可控
把SVG当背景图塞进::before，是解决尺寸、颜色、缩放问题的务实方案。虽然无法直接改SVG内联色，但能用background-size缩放、background-position微调，且兼容性比content: url()更好（IE9+都支持）。
关键点：必须配合content: ""（空字符串）触发伪元素生成，再用background-image覆盖内容区。
立即学习“前端免费学习笔记（深入）”；
- 写法示例：
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; } -
fill='%23007acc'里的%23是#的URL编码，确保颜色可内联 - 用
background-size: contain保持比例，cover则强制填满（可能裁剪） - 若需响应式，可配合
em单位：width: 1em; height: 1em;，让图标随文字缩放
为什么list-style: none和position: relative缺一不可
列表项前加自定义图标，本质是“覆盖默认行为”。如果漏掉这两步，要么原生圆点和SVG并存，要么图标定位飘到页面顶部。
-
ul, ol { list-style: none; }必须写在最外层，否则li::before会和浏览器默认符号重叠 -
li { position: relative; }是::before用position: absolute的前提——否则left: 0会相对于body定位，图标飞走 - 若用
display: flex布局，li { position: relative; }仍建议保留，以防后续加hover动画需绝对定位 - 记得给
li预留左侧空间：padding-left: 24px（图标宽+间距），避免文字被遮挡
字体图标 vs 内联SVG：选哪个更稳妥
如果项目已引入Font Awesome等字体图标库，用content: "\f00c"加font-family确实省事；但纯SVG方案更轻量、无字体加载阻塞、颜色可直接写死。真正容易被忽略的差异点在可访问性和维护成本。
- 字体图标依赖
@font-face加载成功，控制台出现Failed to decode downloaded font就全白屏——而SVG是HTTP请求，失败时至少能看到占位框 - 内联SVG（data URL）无额外请求，但字符过长影响CSS可读性；建议用构建工具自动转义，别手敲
%3Csvg - 若图标需动态变色（如主题切换），SVG的
fill可直接用CSS变量：fill: var(--icon-color, #007acc)；字体图标只能靠color，且受限于字体本身是否支持多色 - 屏幕阅读器默认忽略
::before，无论字体还是SVG——功能型图标（如“删除”）必须补aria-label，这点常被跳过
