Html li元素文本在：：before之后溢出时出现意外的顶部空格

我有一个列表组件，其中自定义项目符号定义为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内容不溢出容器，所有这些都可以正常工作。然后，整个内容只跳下几个像素，在项目符号和内容之间留下一个奇怪的上边缘

我重新创造了它

我已经设法用

工作休息：全部休息
让它消失，但这当然不是一个可行的解决方案

有什么提示吗？
在执行自定义伪元素时，最好将它们放置在绝对位置，并与
li
相对。请参见下面的示例，这已解决您的问题：

li {
  padding-left: 35px;
  margin-bottom: 24px;
  margin-top: 0;
  font-size: 16px;
  line-height: 24px;
  list-style-type: none;
  position: relative;
}

li::before {
  display: inline-flex;
  width: 4px;
  height: 4px;
  margin-right: 15px;
  margin-left: -29px;
  background-color: #00c878;
  border-radius: 375px;
  content: "";
  position: absolute;
  top: 9px;
}  

您可以使用
top
和
left
属性根据需要重新定位。
有很多解决方案。但这个效果最好

请将伪元素上的位置设置为绝对，并删除边距。我的解决方案使用定位，使包裹线自动正确对齐

优势：


非常紧凑的代码
适用于任何字体大小
（不包含绝对像素值）
将行完全对齐
（第一行和后续行之间没有细微的移动）


.container{
宽度：170px；
边框：1px纯红；
}
保险商实验室{
保证金：0；
填充：0；
}
李{
左侧填充：35px；
边缘底部：24px；
边际上限：0；
字体大小：16px；
线高：24px；
列表样式类型：无；
位置：相对位置；
单词break：打破一切；
}
李：以前{
宽度：4px；
高度：4px；
背景色：#00c878；
边界半径：375px；
内容：“；
位置：绝对位置；
左：10px；
顶部：9px；
}

布兰肯ETF

科技ETF



Finanzdienstleistungen ETF
Gesundheitswesen ETF



固定ETF



工业ETF

<代码> >如果你删除了负边距，你会看到这个技巧，你需要考虑位置：绝对在这里，BuleTif你不想让它们溢出，然后<代码>空白：NoRAP；<代码>在这里可能有帮助。请在这里添加HTML，以便我们有更多的工作。请注意，您可以在问题中使用一个片段来代替小提琴。