[HTML/CSS]導航欄的下劃線跟隨效果
阿新 • • 發佈：2018-04-26
absolute .com p s back flex margin 下一個 bottom 100%
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>純CSS導航欄下劃線跟隨效果</title>8 </head> 9 <style> 10 *{ 11 margin: 0; 12 padding: 0; 13 } 14 html, 15 body{ 16 width: 100%; 17 height: 100%; 18 } 19 ul{ 20 display: flex; 21 position: absolute; 22 top: 50%; 23 left: 50%; 24 transform: translate(-50%, -50%); 25 } 26 li{ 27 position: relative; 28 padding: 1em 2em; 29 font-size: 24px; 30 list-style: none; 31 white-space:nowrap; 32 } 33 li::after{ 34 content: ‘‘; 35 position: absolute; 36 bottom: 0; 37 width: 0; 38 height: 2px; 39 background-color: #000; 40 transition: .5s all linear; 41 } 42 li:hover::after{ 43 width: 100%; 44 } 45 li::after{ 46 left: 100%; /*選中項上一個下劃線收回的方向，從左往右收線*/ 47 } 48 li:hover::after{ 49 left: 0; /*選中項下劃線出線的方向，從左往右出線*/ 50 } 51 li:hover ~ li::after { 52 left: 0; /*選中項下一個下劃線出線的方向，從左往右收線*/ 53 } 54 </style> 55 <body> 56 <ul> 57 <li>純CSS導航欄</li> 58 <li>導航菜單項</li> 59 <li>被劃過</li> 60 <li>下劃線跟隨</li> 61 </ul> 62 </body> 63 </html>
[HTML/CSS]導航欄的下劃線跟隨效果