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的背景颜色和高度等样式即可。