利用伪元素after在列表项下面添加一条边框

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
	ul{
		 200px;
		margin: 0 auto;
	}
	ul li{
		 200px;
		height: 50px;
		line-height: 50px;
		text-align: center;
	}
	ul li::after{
		content: "";  //注意这种用法
		display: block; //before和after伪元素默认是行级元素
		border-bottom: 1px solid red;
	}
</style>
</head>
<body>
	<ul>
		<li>我要自学网1</li>
		<li>我要自学网2</li>
		<li>我要自学网3</li>
		<li>我要自学网4</li>
		<li>我要自学网5</li>
	</ul>
	
</body>
</html>

  

原文地址:https://www.cnblogs.com/nanfengnan/p/14299811.html