在网页的制作过程中，经常会遇到需要给元素添加边框的情况，比如在ul中，如图所示
此时假如要给其中的五个li元素都加上侧边框，按照原来的方法，可以看到确实有失美观
可以设想，假如此时让边框变得短一点，应该效果会好一些，因此便可以借助css提供的before和after伪元素来实现
before和after伪元素相关内容可以参考MDN文档 before after
实现代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
ul{
width: 600px;
height: 50px;
background-color: #292929;
position: absolute;
left: 50px;
top: 50px;
}
ul, li{
margin: 0;
padding: 0;
font-size: 14px;
}
li{
position: relative;
width: 100px;
height: 50px;
line-height: 50px;
display: inline-block;
color: #FFFFFF;
text-align: center;
}
li:before {
content: "";
position: absolute;
left: 0;
top: 12px;
width: 1px;
height: 50%;
border-right: 1px dashed #888888;
box-sizing: border-box;
}
</style>
</head>
<body>
<ul>
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
<li>第四个</li>
<li>第五个</li>
</ul>
</body>
</html>
实现效果如图所示
可以看出，使用伪元素添加了边框后，虽然还是有些单调，但是相比之前的边框还是美观了许多，并且实现过程也并不复杂，值得使用。
来源：CSDN
作者：溪午不闻钟_
链接：https://blog.csdn.net/bruce_zhao1407/article/details/104294552