CSS列表项多行文本时背景图标显示异常问题求助

你当前的问题是：用flex布局结合伪元素实现自定义图标列表时，当列表项文本超过一行换行后，后续行的文本会向左偏移，覆盖图标区域，导致图标仅部分可见甚至完全被遮挡。

方案一：保持Flex布局，给文本添加容器 #

这种方法通过给文本单独设置容器，让文本在自己的空间内换行，避免和图标重叠。

修改后的HTML：

<ul class="featureList">
  <li><span>2 links</span></li>
  <li><span>Own analytics platform</span></li>
  <li><span>Chat support</span></li>
  <li class="disabled"><span>Mobile application</span></li>
  <li class="disabled"><span>Unlimited users</span></li>
</ul>

更新后的CSS：

.featureList {
  --color: #000;
  --icon: var(--redTick);
  --height: 0.875rem;

  margin: 0 0 2.75rem;
  padding: 0;
  font-weight: 500;

  li {
    color: var(--color);
    margin-bottom: 2rem;
    display: flex;
    align-items: flex-start; /* 改为顶部对齐，避免多行文本时图标居中导致视觉不协调 */
    gap: 1rem;

    &:before {
      content: "";
      background-image: var(--icon);
      background-size: cover;
      display: block;
      width: 1.125rem;
      height: var(--height);
      margin-top: 0.25rem; /* 微调图标垂直位置，匹配文本第一行基线 */
    }

    span {
      flex: 1; /* 让文本容器占据剩余宽度，换行时自动缩进 */
    }

    &:last-child {
      margin-bottom: 0;
    }

    &.disabled {
      --color: #b1b8c9;
      --height: 1.125rem;
      --icon: var(--close);
      margin-top: 0; /* disabled图标高度匹配行高，取消偏移 */
    }
  }
}

方案二：改用Padding + 绝对定位替代Flex布局 #

这种方法无需修改HTML，通过传统的列表排版方式解决问题，兼容性更强。

更新后的CSS：

.featureList {
  --color: #000;
  --icon: var(--redTick);
  --icon-size: 1.125rem;
  --height: 0.875rem;

  margin: 0 0 2.75rem;
  padding: 0;
  font-weight: 500;

  li {
    color: var(--color);
    margin-bottom: 2rem;
    padding-left: calc(var(--icon-size) + 1rem); /* 为图标和间距预留空间 */
    position: relative;
    line-height: 1.5; /* 确保行高足够，避免文本和图标垂直重叠 */

    &:before {
      content: "";
      background-image: var(--icon);
      background-size: cover;
      position: absolute;
      left: 0;
      top: 0.25rem; /* 微调图标垂直位置，对齐文本第一行 */
      width: var(--icon-size);
      height: var(--height);
    }

    &:last-child {
      margin-bottom: 0;
    }

    &.disabled {
      --color: #b1b8c9;
      --height: var(--icon-size);
      --icon: var(--close);
      top: 0; /* disabled图标高度匹配行高，取消偏移 */
    }
  }
}

方案选择建议 #

• 若后续需要在列表项中添加其他交互元素（如操作按钮），优先选方案一，Flex布局的扩展性更强。
• 若追求简洁的实现方式且无需修改HTML，优先选方案二，符合传统列表的排版逻辑，兼容性更好。

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