如何对齐自定义图片项目符号列表的文本？

我用CSS伪元素实现了以图片作为项目符号的无序列表，但现在遇到一个问题：列表项文本换行后，第二行会从图片图标的位置开始，没法和第一行的首个单词对齐。我知道可以通过给li加padding-left或margin-left解决，但想了解有没有其他实现方式。默认无序列表因为list-style是在li标签内部的，所以文本能正常对齐（如图所示）。

现有代码 #

CSS代码 #

li::before {
  content: "";
  display: inline-block;
  height: 15px;
  width: 15px;
  background-size: contain;
  background-image: url('https://adp-com-prod.es.ad.adp.com/-/media/apps/wfn/images/rs_email_checklisticon-bullet.png?rev=f7aed74…&hash=2EB10B8B4C4FCB24BC37B1E501219BBB');
  background-repeat: no-repeat;
  margin-right: 7px;
  background-position: center center;
  vertical-align: middle;
}
ul {
  padding-left: 0;
  list-style: none;
}

HTML代码 #

<ul class="voe-list">
  <li>
    <strong>Simplicity.</strong> this is bullet number one with a longer sentence so it goes on the second line. Stay tuned for bullet number 2.
  </li>
  <li>
    <strong>Compliance.</strong>this is bullet number one with a longer sentence so it goes on the second line.Stay tuned for bullet number 3. 
  </li>
  <li>
    <strong>Flexibility.</strong>this is bullet number one with a longer sentence so it goes on the second line.Stay tuned for bullet number 4.
  </li>
</ul>

替代实现方法 #

1. 绝对定位+内边距 #

给li设置相对定位，伪元素设为绝对定位固定在左侧，同时给li添加左侧内边距留出图标位置，文本会在padding区域内排列，换行自动对齐：

ul {
  padding-left: 0;
  list-style: none;
}
li {
  position: relative;
  padding-left: 22px; /* 图标宽度+间距，按需调整 */
}
li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%); /* 垂直居中 */
  height: 15px;
  width: 15px;
  background-size: contain;
  background-image: url('https://adp-com-prod.es.ad.adp.com/-/media/apps/wfn/images/rs_email_checklisticon-bullet.png?rev=f7aed74…&hash=2EB10B8B4C4FCB24BC37B1E501219BBB');
  background-repeat: no-repeat;
  background-position: center center;
}

2. 直接使用list-style-image属性 #

用CSS原生的list-style-image设置项目符号图片，浏览器会自动处理文本对齐逻辑，不需要额外调整：

ul {
  list-style-image: url('https://adp-com-prod.es.ad.adp.com/-/media/apps/wfn/images/rs_email_checklisticon-bullet.png?rev=f7aed74…&hash=2EB10B8B4C4FCB24BC37B1E501219BBB');
  list-style-position: outside; /* 默认值，确保文本对齐 */
  padding-left: 20px; /* 调整列表整体缩进 */
}

缺点是对图片尺寸的控制不如伪元素灵活，如果需要精确调整大小，可能还要配合其他属性，但基础场景下足够实用。

3. CSS Grid布局 #

给li设置Grid布局，把图标和文本分成两列，文本列占满剩余空间，换行时自然和第一行首单词对齐：

ul {
  padding-left: 0;
  list-style: none;
}
li {
  display: grid;
  grid-template-columns: 15px 1fr; /* 图标列固定宽度，文本列自适应 */
  gap: 7px; /* 图标和文本的间距 */
  align-items: center; /* 垂直居中对齐 */
}
li::before {
  content: "";
  height: 15px;
  width: 15px;
  background-size: contain;
  background-image: url('https://adp-com-prod.es.ad.adp.com/-/media/apps/wfn/images/rs_email_checklisticon-bullet.png?rev=f7aed74…&hash=2EB10B8B4C4FCB24BC37B1E501219BBB');
  background-repeat: no-repeat;
  background-position: center center;
}

内容的提问来源于stack exchange，提问作者Ripley E