CSS中带:before图形的UL/LI标签样式异常求助

针对你遇到的两个问题，这里提供两种简单可靠的修复方案，核心是给对勾图标预留固定空间，同时调整列表项的间距避免重叠。

方案一：绝对定位伪元素（推荐） #

这种方式兼容性好，能精准控制图标的位置：

HTML 代码 #

<ul class="check-list">
  <li>普通文本</li>
  <li>Some longer text that wraps to the next line and should align properly under the checkmark without overlapping the element below</li>
  <li>另一个列表项</li>
</ul>

CSS 代码 #

.check-list {
  list-style: none;
  padding-left: 0;
  margin: 1.2em 0; /* 控制列表和其他元素的间距 */
}

.check-list li {
  position: relative;
  padding-left: 1.6em; /* 给对勾图标预留左侧空间 */
  margin-bottom: 0.6em; /* 增加列表项之间的垂直间距，解决重叠 */
  line-height: 1.5; /* 优化行高，提升长文本可读性 */
}

.check-list li:before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #27ae60; /* 自定义对勾颜色 */
  font-weight: 700;
}

方案二：行内块级伪元素 #

如果不想用定位，也可以通过固定宽度的行内块元素实现：

CSS 代码（HTML 同上） #

.check-list {
  list-style: none;
  padding-left: 0;
  margin: 1.2em 0;
}

.check-list li {
  margin-bottom: 0.6em;
  line-height: 1.5;
}

.check-list li:before {
  content: "✓";
  display: inline-block;
  width: 1.6em; /* 固定宽度，确保文本换行后对齐 */
  color: #27ae60;
  font-weight: 700;
}

修复说明 #

1. 文本换行对齐问题：通过给<li>设置左内边距（方案一）或给伪元素设置固定宽度（方案二），让文本从图标右侧开始排列，换行时自然对齐到图标下方，不会回到最左侧。
2. 元素重叠问题：通过给<ul>设置上下外边距、给<li>设置底部外边距，同时调整行高，确保长文本和其他元素之间有足够的间距，避免重叠。

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