css导航分割线样式 |html footer css

/*方法一：使用border属性实现分割线*/
.navbar li {
border-right: 1px solid #ccc;
padding-right: 10px;
}
/*方法二：使用::before伪元素实现分割线*/
.navbar li::before {
content: '';
border-right: 1px solid #ccc;
margin-right: 10px;
height: 20px;
display: inline-block;
vertical-align: middle;
}
/*方法三：使用::after伪元素实现分割线*/
.navbar li::after {
content: '';
border-right: 1px solid #ccc;
margin-left: 10px;
height: 20px;
display: inline-block;
vertical-align: middle;
}

以上三种方法都可以通过控制border属性和伪元素的样式参数来达到自定义分割线效果的目的。在使用时需要根据具体的需求和设计要求选择合适的方法。