[分享]css列表下划线样式

CSS列表下划线样式为网页中常用的一个样式，可以用来强调列表中的关键信息，使其更易于辨认和理解。

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

li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 15px;
}

li:before {
  content: "";
  position: absolute;
  width: 10px;
  height: 2px;
  background-color: #000;
  bottom: -5px;
  left: 0;
} 

以上代码中，首先将无序列表的默认样式去掉，然后对每个列表项设置了相对定位，使下划线能够从列表项的左侧开始绘制。接着使用伪元素:before为每个列表项添加了一个两个像素高的黑色实线作为下划线，并将其定位在了列表项的底部中心位置。

如果需要设置其他颜色或样式的下划线，只需要更改伪元素:before的背景颜色和高度等样式即可。