使用:before伪元素为li设置SVG勾选图标无法显示问题求助

算力阿峰

2026-8-24

问题：自定义列表项前置SVG图标无法显示

我已移除无序列表的默认标记，想用谷歌图标库的勾选SVG图标替换每个li项的前置标记，但设置后看不到SVG图标——只有添加背景色时能看到对应区域，且该SVG文件已存于项目目录，文档中其他SVG可正常使用。

相关SCSS代码如下：

ul {
  list-style-type: none;
  li {
    margin-bottom: 1em;
    position: relative;
    &:before {
      content: "";
      position: absolute;
      width: 2.5em;
      height: 2.5em;
      background-image: url("icon-check3.svg");
      background-size: contain;
      background-position: center;
      margin-left: -3em;
    }
  }
}

解决方案

校验文件路径：确认CSS编译后的文件位置与SVG的相对路径是否正确。比如如果CSS在css/子目录，路径应改为../icon-check3.svg；也可以用根路径/icon-check3.svg快速排查是否是路径问题。
检查SVG文件有效性：直接在浏览器中打开SVG文件，确认能正常显示。若SVG存在语法错误或viewBox属性设置异常，会导致背景渲染为空。

显式设置伪元素的display属性：给&:before添加display: inline-block（或block），伪元素默认的display: inline可能导致背景无法正常渲染。修改后的代码片段：

&:before {
  content: "";
  position: absolute;
  width: 2.5em;
  height: 2.5em;
  background-image: url("icon-check3.svg");
  background-size: contain;
  background-position: center;
  margin-left: -3em;
  display: inline-block; /* 添加此行 */
}