本文详解如何通过 css 绝对定位 ::before 伪元素实现带上下边框的列表项，并确保长文本始终从统一左侧起始、不与自定义项目符号重叠。
本文详解如何通过 css 绝对定位 ::before 伪元素实现带上下边框的列表项，并确保长文本始终从统一左侧起始、不与自定义项目符号重叠。
在构建语义化、响应式列表时，常需自定义项目符号（如彩色圆点）并添加顶部/底部边框以增强视觉分隔。但若直接使用 list-style-position: inside 或依赖 vertical-align + line-height 控制伪元素位置，长文本换行后首行可能被 ::before 内容覆盖——这是因为默认的 ::before 是行内级元素，参与文本流布局，会挤压 的可用空间。
解决核心在于：将项目符号脱离文档流，精准锚定在列表项左侧，同时为文本内容预留固定缩进空间。
✅ 正确方案：绝对定位 + 左侧内边距
将 li::before 设为 position: absolute，并配合 li 设置 position: relative（作为其定位上下文），再通过 left 和 top 精确定位符号；同时，为 移除冗余的 left: 1em（易导致响应式错位），改用 li 的 padding-left 统一控制文本起始位置：
div {
width: 20%;
}
ul {
list-style-type: none;
padding-left: 0; /* 移除默认 ul 左侧缩进 */
}
li {
position: relative; /* 为 ::before 提供定位上下文 */
border-top: 1px solid #ccc;
padding: 0.1em 0.3em 0.1em 1.5em; /* 左侧留出足够空间给项目符号 */
min-height: 1.4em; /* 防止极短文本行高塌陷 */
}
li::before {
content: "\2022";
color: #800000;
font-size: 1em;
position: absolute;
left: 0.3em; /* 相对于 li 左侧偏移 */
top: 50%;
transform: translateY(-50%); /* 垂直居中（兼容多行） */
}
li:first-child {
border-top: none; /* 首项无需上边框 */
}
li:last-child {
border-bottom: 1px solid #ccc; /* 末项添加下边框 */
}<div>
<ul>
<li><span>foo</span></li>
<li><span>bar</span></li>
<li><span>very long sentence is here which should be nicely aligned</span></li>
</ul>
</div>? 关键要点说明：
- position: relative 在 li 上必不可少，否则 absolute 的 ::before 会相对于最近的定位祖先（可能是 body）偏移，失去可控性；
- 使用 transform: translateY(-50%) 替代 vertical-align，可确保多行文本时项目符号始终垂直居中于整个
- 高度；
- padding-left（如 1.5em）应略大于 ::before 的 left 值（如 0.3em）加符号宽度，避免文字紧贴符号；
- 移除 上的 position: relative 和 left，避免嵌套定位干扰与可维护性下降。
此方案完全兼容长文本自动换行、多语言排版及缩放场景，无需 JavaScript，纯 CSS 即可实现专业级列表对齐效果。
