CSS下划线菜单

Question

I admit I am a no coder and I need to get this look for my menu:

I do want to animate it on hover and I want the effect to remain after it's clicked (you can see example of the animation in the CSS code I have attached). So I managed to get the bottom border, but I do want to create some space between the border and text and I also wanna get the top border. For some reason it didn't work for me.

Here's my code so far:

 ol, ul { list-style: none; } li { display: inline-block; vertical-align: middle; } a:hover, a:focus, a:active { color: #61f6ff; text-decoration: none; } a::before { content: ''; display: block; position: absolute; bottom: 3px; left: 0; height: 3px; width: 100%; background-color: #61f6ff; transform-origin: right top; transform: scale(0, 1); transition: color 0.1s,transform 0.2s ease-out; } a:active::before { background-color: #61f6ff; } a:hover::before, a:focus::before { transform-origin: left top; transform: scale(1, 1); } 

 <ul> <li class="item"><a href="#">Homepage</a></li> <li class="item"><a href="#">About Us</a></li> <li class="item"><a href="#">Our Services</a></li> <li class="item"><a href="#">Costumers</a></li> <li class="item"><a href="#">Contact Us</a></li> </ul> 

Answer 1

Assign border-top and border-bottom to anchor links and animate them via css3 transitions to achieve fade in like animation. You can also play with padding to achieve more space between border and text. Working code below.

 ol, ul { list-style: none; } li { display: inline-block; vertical-align: middle; } a { text-decoration: none; color: #0B1B70; -webkit-transition: border 200ms ease-out; -moz-transition: border 200ms ease-out; -o-transition: border 200ms ease-out; transition: border 200ms ease-out; border-bottom: 1px solid transparent; border-top: 1px solid transparent; padding: 2px; } a:hover, a:focus, a:active { border-bottom: 1px solid #61f6ff; border-top: 1px solid #61f6ff; } 

 <nav> <ul> <li class="item"> <a href="#">Homepage</a> </li> <li class="item"> <a href="#">About Us</a> </li> <li class="item"> <a href="#">Our Services</a> </li> <li class="item"> <a href="#">Costumers</a> </li> <li class="item"> <a href="#">Contact Us</a> </li> </ul> </nav>