如何使用CSS ::before伪元素在列表前插入自定义SVG图标？-css教程-PHP中文网

content: url()插入svg不显示或尺寸失控，根本原因是伪元素无固有尺寸且不支持background-size等控制，必须显式设置width/height、display:inline-block，并避免含外部引用或内联样式的svg；推荐改用background-image+content:""方案更可控。

如何使用css ::before伪元素在列表前插入自定义svg图标？

为什么`content: url()`插入SVG后图标不显示或尺寸失控

直接用content: url("icon.svg")是最直观的做法，但实际中常遇到图标空白、拉伸变形、或完全不渲染。根本原因在于：浏览器对content: url()里的SVG不支持background-size、color等控制，且默认按原始宽高渲染，而伪元素本身没有固有尺寸——若没显式设width/height，它可能塌陷为0×0。

更麻烦的是，某些SVG文件含viewBox但无width/height属性，或用了外部引用（如<use href></use>），content: url()会静默失败，控制台也不报错。

必须给::before显式设置display: inline-block（不能只靠content）
width和height要写具体值（如16px），不能依赖font-size或line-height
避免使用含<style></style>、<script></script>或外部资源的SVG——content: url()只加载静态内容
本地开发时路径需相对于CSS文件位置，不是HTML位置；线上部署注意CORS（尤其SVG放在CDN时）

用`background-image`替代`content: url()`更可控

把SVG当背景图塞进::before，是解决尺寸、颜色、缩放问题的务实方案。虽然无法直接改SVG内联色，但能用background-size缩放、background-position微调，且兼容性比content: url()更好（IE9+都支持）。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

关键点：必须配合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，这点常被跳过