CSS 菜单悬停下划线动画

Question

I'm trying to create an underline animation when hovering on menu items (based on this CodePen ). For some reason, all my menu items are underlined instead of just one when hovering. I only want the menu item that is hovered to be underlined, not everything.

Here is my code:

 html { background-color: #131313; } .pages { position: absolute; margin: 0; padding: 0; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 17px; list-style: none; } .pages li { float: left; display: inline-block; padding: 15px; } .pages a { color: white; text-decoration: none; } .pages a:after { content: ''; position: absolute; width: 0; height: 3px; display: block; margin-top: 5px; right: 0; background: #fff; transition: width .4s ease; } .pages a:hover:after { width: 100%; left: 0; background: #fff; }

 <ul class="pages"> <li><a href="#top" id="menu-home">Home</a></li> <li><a href="#about" id="menu-about">About</a></li> <li><a href="#work" id="menu-work">Work</a></li> <li><a href="#projects" id="menu-proj">Projects</a></li> <li><a href="#connect" id="menu-connect">Connect</a></li> </ul>

Please help!

Answer 1

Remove position:absolute from .pages a:after . Elements with absolute positioning are not in the normal document flow. In your snippet your 100% width will not be 100% of a but 100% of nearest relativly/absolutly positioned parent(body by defaul; ul in your case).

As an alternative, you may set position:relative to li, so that :after element will be underlying li.

 html { background-color: #131313; } .pages { position: absolute; margin: 0; padding: 0; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 17px; list-style: none; } .pages li { float: left; display: inline-block; padding: 15px; position: relative } .pages a { color: white; text-decoration: none; } .pages a:after { content: ''; position: absolute; width: 0; height: 3px; display: block; margin-top: 5px; right: 0; background: #fff; transition: width .4s ease; } .pages a:hover:after { width: 100%; left: 0; background: #fff; }

 <ul class="pages"> <li><a href="#top" id="menu-home">Home</a></li> <li><a href="#about" id="menu-about">About</a></li> <li><a href="#work" id="menu-work">Work</a></li> <li><a href="#projects" id="menu-proj">Projects</a></li> <li><a href="#connect" id="menu-connect">Connect</a></li> </ul>

My explanation may be to complicated so you may look at snippet below. I tried to explain positioning.

 .box { width: 100px; height: 100px; } #parent { background: pink; width: 200px; height: 200px; } #child1 { position: relative; top: 10px; left: 10px; background: lightgreen; } #child2 { position: absolute; background: lightyellow; }

 <div id="parent" class='box'> <!--parent--> <!-- relative element stays relative to it's original position but can be shifted--> <div id="child1" class='box'>position:relative with "top"and"left" of 10px</div> <div id="child2" class='box'>position:absolute</div> </div> <!-- notice how yellow box is stays where it should be without "top"&"left" assigned, but it's owerlaping shifted green box -->