如何正确使用background-image替换列表项目符号并合理定位？

可以通过相对定位+绝对定位+内边距的组合方案实现通用的自定义列表符号，完美解决文本换行后对齐的问题，代码如下：

列表项基础样式 #

.list-item {
  position: relative;
  /* 内边距宽度 = 符号宽度 + 符号与文本的间距，可根据需求调整 */
  padding-left: 3em;
  /* 可选：增加列表项之间的垂直间距 */
  margin-bottom: 0.6em;
}

自定义符号伪元素样式 #

.list-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 1.5em;
  height: 1.5em;
  background: url(../myimg.png);
  background-size: contain;
  background-repeat: no-repeat;
}

方案说明 #

1. 给.list-item设置position: relative，让伪元素的绝对定位锚定在当前列表项上，彻底摆脱固定left值的局限性，适配任何布局场景。
2. padding-left为文本预留出放置符号的空间，文本会从内边距右侧开始排列，换行时自然对齐到同一基准线，不会跑到符号下方。
3. 伪元素通过left: 0固定在列表项的左侧内边距区域，和文本保持稳定的间距，视觉上和原生列表符号的对齐逻辑一致。

内容的提问来源于stack exchange，提问作者Gaetan L.