[分享]css列表样式灰色的线

在设计网站的时候，常常需要使用到列表。这时候，我们可以使用CSS来优化我们的列表样式。其中一种比较常见的样式是让列表项的前面出现一条灰色的线，这样可以更好地分隔出不同的列表项，让页面更加清晰易读。 u...

在设计网站的时候，常常需要使用到列表。这时候，我们可以使用CSS来优化我们的列表样式。其中一种比较常见的样式是让列表项的前面出现一条灰色的线，这样可以更好地分隔出不同的列表项，让页面更加清晰易读。

ul {
    list-style: none;
    padding-left: 20px;
}

li:before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 8px;
    background-color: #c8c8c8;
    vertical-align: middle;
}

上面这段CSS代码使用了伪元素:before来生成一个宽度为6px、高度为6px的灰色方块，并通过margin-right和vertical-align属性让它与列表文字垂直居中，并与下一个列表项有一定的间距。这样一来，我们就成功地实现了灰色的列表项分隔线。

当然，这只是一种样式，我们还可以根据自己的需要来自定义列表项的分隔线。比如颜色、宽度、形状等等都可以进行修改，只要通过CSS来实现即可。