1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> 6 7 <style> 8 ul, li{ 9 list-style: none; 10 } 11 *{ 12 margin: 0; 13 padding: 0; 14 } 15 .item{ 16 line-height: 50px; 17 /* 逻辑像素，在高清屏下，物理像素2px */ 18 /*border-bottom: 1px solid #000;*/ 19 position: relative; 20 } 21 .item:after{ 22 content: ''; 23 display: block; 24 100%; 25 height: 1px; 26 border-bottom: 1px solid #000; 27 position: absolute; 28 left: 0; 29 bottom: -1px; 30 transform: scaleY(0.5); 31 } 32 </style> 33 34 <title></title> 35 </head> 36 <body> 37 38 <ul class="list"> 39 40 <li class="item">打发似的你发生的发生</li> 41 <li class="item">打发似的你发生的发生</li> 42 <li class="item">打发似的你发生的发生</li> 43 <li class="item">打发似的你发生的发生</li> 44 <li class="item">打发似的你发生的发生</li> 45 <li class="item">打发似的你发生的发生</li> 46 <li class="item">打发似的你发生的发生</li> 47 <li class="item">打发似的你发生的发生</li> 48 <li class="item">打发似的你发生的发生</li> 49 <li class="item">打发似的你发生的发生</li> 50 <li class="item">打发似的你发生的发生</li> 51 <li class="item">打发似的你发生的发生</li> 52 <li class="item">打发似的你发生的发生</li> 53 <li class="item">打发似的你发生的发生</li> 54 <li class="item">打发似的你发生的发生</li> 55 56 </ul> 57 58 59 </body> 60 </html>