1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>纯CSS导航栏下划线跟随效果</title> 6 </head> 7 <style> 8 ul { 9 display: flex; 10 position: absolute; 11 width: 800px; 12 top: 50%; 13 left: 50%; 14 transform: translate(-50%, -50%); 15 } 16 17 li { 18 position: relative; 19 padding: 20px; 20 font-size: 16px; 21 color: #000; 22 line-height: 1; 23 transition: 0.2s all linear; 24 cursor: pointer; 25 list-style: none; 26 } 27 28 li::before { 29 content: ""; 30 position: absolute; 31 top: 0; 32 left: 100%; 33 width: 0; 34 height: 100%; 35 border-bottom: 2px solid #000; 36 transition: 0.2s all linear; 37 } 38 39 li:hover::before { 40 width: 100%; 41 top: 0; 42 left: 0; 43 transition-delay: 0.1s; 44 border-bottom-color: #000; 45 z-index: -1; 46 } 47 li:hover ~ li::before { 48 left: 0; 49 } 50 li:active { 51 background: #000; 52 color: #fff; 53 } 54 </style> 55 <body> 56 <ul> 57 <li>不可思议的CSS</li> 58 <li>导航栏</li> 59 <li>光标小下划线跟随</li> 60 <li>PURE CSS</li> 61 <li>Nav Underline</li> 62 </ul> 63 </body> 64 </html>
