CSS实现列表元素分割线
# 方法一：利用border绘制分割线
使用border-bottom给每个元素一个下边框，同时取消最后一个元素的边框。同理用border-top和first-child是一样的道理
ul {
list-style-type: none;
li {
border-bottom: 1px solid #c0c0c0;
}
li:last-child {
border: none;
}
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
另一种使用border的方法是利用元素选择+，只会在相邻元素中生效。注意：border-top才能实现效果
ul {
list-style-type: none;
li + li {
border-top: 1px solid #c0c0c0;
}
}
1
2
3
4
5
6
7
2
3
4
5
6
7
# 方法二：控制元素高度
设置元素为block并控制分割线的高度即可。
line {
display: block;
width:100%;
height: 2px;
background-color:#c0c0c0;
}
1
2
3
4
5
6
2
3
4
5
6
# 方法三：伪类
<!-- <div class="line">分割线</div> -->
.line {
display: flex;
align-items: center;
}
.line::before {
content: '';
flex: 1;
height: 1px;
background-color: #c0c0c0;
}
.line::after {
content: '';
flex: 1;
height: 1px;
background-color: #c0c0c0;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
上次更新: 2025/09/05, 8:09:00