html - 当 li 元素文本在::before 之后溢出时出现意外的顶部空间

Question

我有一个列表组件，其中包含一个定义为 before 伪元素的自定义元素符号:

li:before {
  display: inline-flex;
  width: .8rem;
  height: .8rem;
  margin-right: 1.5rem;
  margin-left: -2.9rem;
  background-color: #00c878;
  border-radius: .375rem;
  content: "";
}

只要 li 内容不会溢出容器，一切都可以正常工作。然后，整个内容只是向下跳了几个像素，并在元素符号和内容之间留下了一个奇怪的上边距。

我重新创建了它 here .
我设法使用 work-break: break-all 让它消失了，但这当然不是一个可持续的解决方案。
有小费吗？

Answer 1

这么多解决方案。但这个效果最好
请将位置设置为绝对 在伪元素上并删除边距。我的解决方案使用定位来自动正确排列包装线。
优点:

非常紧凑的代码

适用于任何字体大小(不包含绝对像素值)

完美对齐行(第一行和下一行之间没有轻微的偏移)

.container {
  width:170px;
  border:1px solid red;
}
ul {
  margin: 0;
  padding: 0;
}
li {
  padding-left: 35px;
  margin-bottom: 24px;
  margin-top: 0;
  font-size: 16px;
  line-height: 24px;
  list-style-type: none;
  position:relative;
  word-break: break-all;
}
 li::before {
  width: 4px;
  height: 4px;
  background-color: #00c878;
  border-radius: 375px;
  content: "";
  position: absolute;
  left: 10px;
  top: 9px;
}

<div class="container">
    <div class="list unordered">
        <h3 class="text-grey-150 h5 "> Branchen ETFs </h3>
        <ul class="">
            <li>Technologie ETF
                <br>
            </li>
            <li style="/* word-break: break-all; */">Finanzdienstleistungen ETF</li>
            <li>Gesundheitswesen ETF
                <br>
            </li>
            <li>Immobilien ETF
                <br>
            </li>
            <li>Industrie ETF</li>
        </ul>
    </div>
</div>