列表项文本对齐优化：避免文本在装饰元素下方并添加上下边框

问题说明 #

需要为列表项添加上下边框，自定义列表项的装饰元素，且文本过长换行时，不能跑到装饰元素的下方，现有代码无法实现该效果。

原代码问题分析 #

原代码通过span的相对定位实现文本缩进，这种方式下文本换行后会失去缩进，直接跑到装饰元素（伪元素）的下方；同时伪元素未占据固定空间，无法稳定控制文本与装饰元素的间距。

修正后的代码实现 #

CSS 代码

div {
  width: 20%;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  border-top: 1px solid;
  padding: 0.1em 0.3em 0.1em 1.5em; /* 左侧预留装饰元素的空间 */
  position: relative;
}

li::before {
  content: "\2022";
  color: #800000;
  font-size: 1em;
  position: absolute;
  left: 0.3em;
  top: 50%;
  transform: translateY(-50%); /* 垂直居中对齐 */
}

li:last-of-type {
  border-bottom: 1px solid;
}

HTML 代码

<div>
  <ul>
    <li>foo</li>
    <li>bar</li>
    <li>very long sentence is here which should be nicely aligned</li>
  </ul>
</div>

关键修改点 #

1. 布局结构优化：移除多余的span标签，直接在li内放置文本，简化DOM结构
2. 装饰元素定位：给li设置position: relative，将伪元素通过absolute定位到左侧预留的内边距区域，确保装饰元素位置固定
3. 文本缩进控制：通过li的padding-left给文本留出固定的左侧空间，文本换行时会自动保持缩进，不会跑到装饰元素下方
4. 垂直居中对齐：用transform: translateY(-50%)让伪元素与文本垂直居中，视觉效果更统一

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