<!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>