1 <!DOCTYPE HTML>2 <HTMLLang= "en">3 <Head>4 <MetaCharSet= "UTF-8">5 <Metaname= "Viewport"content= "Width=device-width, initial-scale=1.0">6 <Metahttp-equiv= "X-ua-compatible"content= "Ie=edge">7 <title>Pure CSS navigation bar underline follow effect</title>8 </Head>9 <style>Ten *{ One margin:0; A padding:0; - } - HTML, the Body{ - width:100%; - Height:100%; - } + ul{ - Display:Flex; + position:Absolute; A Top:50%; at Left:50%; - Transform:Translate ( -50%, -50%); - } - Li{ - position:relative; - padding:1em 2em; in font-size:24px; - List-style:None; to White-space:nowrap; + } - Li::after{ the content:"'; * position:Absolute; $ Bottom:0;Panax Notoginseng width:0; - Height:2px; the Background-color:#000; + transition:. 5s all linear; A } the Li:hover::after{ + width:100%; - } $ Li::after{ $ Left:100%; /*Select the direction of the underline to retract from left to right*/ - } - Li:hover::after{ the Left:0; /*check the direction of the underlined line, from left to right*/ - }Wuyi li:hover ~ Li::after{ the Left:0; /*check the direction of the next underlined line, from left to right*/ - } Wu </style> - <Body> About <ul> $ <Li>Pure CSS Navigation bar</Li> - <Li>Navigating menu Items</Li> - <Li>Be crossed</Li> - <Li>Underline following</Li> A </ul> + </Body> the </HTML>
Underline following effect of [Html/css] navigation bar