html - 多行时，列表标签包裹的内容不从同一位置开始

Question

1. 我创建了一个无序列表并使用了 list-style-type:none 和 list-style-position: outside。

   <

2. 我还使用 li::before css 伪元素删除默认元素符号点并为元素符号添加自定义颜色和字体。

3. 在上面的场景中，当元素符号点有多行文本时，第二行的文本没有与第一行对齐。

我怎样才能做到这一点？这是我的代码:

  .test-feature ul {
      list-style: disc outside none;
      margin-left: 0;
      padding-left: 1em;
      text-indent: -1.75em;
    }

.test-feature ul li::before {
      content: "\2022";
      color: yellow;
      font-weight: bold;
      display: inline-block;
      width: 1em;
      font-size: 2.2em;
      line-height: 0px;
      padding-left: 1em;
      position: relative;
      top: 0.2em;
    }

Answer 1

你可以使用 CSS flexbox完成这个

ul {
  list-style: none;
  text-indent: -1.3em;
  margin-left: 0;
}

ul li::before {
  content: "\2022";
  color: #e74c3c;
  font-weight: bold;
  display: inline-block;
  font-size: 2.2em;
  line-height: 0px;
  position: relative;
  top: 0.3em;
}

ul li {
  display: flex;
}

<ul>
  <li>
    line1<br />
    line2<br />
    line3<br />
    line4
  </li>
</ul>