CSS Li 背景图像每行文本递减

Question

我正在制定基于 https://codepen.io/chaoticpotato/pen/zYEPRYG 的定价计划。但是，当每个项目符号点的文本超过一行时，它将每行文本稍微向左移动一点。这样做的结果是项目符号点背景图像仅部分可见，并且每行文本都失去可见性。

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

.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: center;
    gap: 1rem;

    &:before {
      content: "";
      background-image: var(--icon);
      background-size: cover;
      display: block;
      width: 1.125rem;
      height: var(--height);
    }

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

    &.disabled {
      --color: #b1b8c9;
      --height: 1.125rem;
      --icon: var(--close);
    }
  }
}

我该如何解决这个问题？我必须在互联网上查找，但到目前为止我找不到合适的解决方案。

Answer 1

正如 @psdpainter 在上面的评论中所说，解决方案是将

flex-shrink: 0

添加到

.featureList li:before