如何让列表项与:after元素垂直对齐？解决标题边框重叠问题

我懂你现在的困扰啦——想用:after伪元素给列表项做底部边框，结果文字和边框挤在一起甚至重叠了对吧？咱们来一步步解决这个问题：

问题根源 #

你的li设置了上下外边距，但:after伪元素是绝对定位在li的bottom:0位置，而li本身没有给文字和边框之间预留空间，导致文字直接贴在了边框上，看起来就像是重叠了。

解决方案1：给li添加底部内边距 #

最直观的方法就是给li加上padding-bottom，让文字和底部边框之间留出空隙：

ul { width: 150px; }
li {
  text-decoration: none;
  list-style-type: none;
  position: relative;
  text-align: center;
  margin-top: 20px;
  margin-bottom: 20px;
  padding-bottom: 8px; /* 新增：给文字和边框预留间距 */
}
li:after {
  content: "";
  position: absolute;
  left: 25%;
  bottom: 0;
  height: 1px;
  width: 50%;
  border-bottom: 1px solid #000;
}

解决方案2：调整:after的bottom值为负数 #

如果不想改动li的内边距，也可以把:after的bottom设为负数，让边框整体往下移动，远离文字：

ul { width: 150px; }
li {
  text-decoration: none;
  list-style-type: none;
  position: relative;
  text-align: center;
  margin-top: 20px;
  margin-bottom: 20px;
}
li:after {
  content: "";
  position: absolute;
  left: 25%;
  bottom: -8px; /* 修改为负数，让边框下移 */
  height: 1px;
  width: 50%;
  border-bottom: 1px solid #000;
}

两种方法都能实现设计图里文字和边框分离的效果，你可以根据自己的整体布局需求选择其中一种~

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