Hover link border animation - html

Question

I would like to know how to animate the link when I hover on it. I want the top border to move down and the bottom border to move up. The borders should fade away, when the animation ends. When I hover on the link, the borders should appear and show the animation.
HTML:
<ul>
<li class="active">Home</li>
<li>About Me</li>
<li>My Passion</li>
</ul>
CSS:
ul li a {
border-bottom: 3px transparent solid;
border-top: 3px transparent solid;
}
ul li a::before {
position: absolute;
left: 0;
top: 0;
visibility: hidden;
-moz-transition: 0.3s;
-o-transition: 0.3s;
-webkit-transition: 0.3s;
transition: 0.3s;
}
ul li a::after {
position: absolute;
left: 0;
top: 100%;
visibility: hidden;
-moz-transition: 0.3s;
-o-transition: 0.3s;
-webkit-transition: 0.3s;
transition: 0.3s;
}
ul li a:hover {
color: blue;
}
ul li a:hover::before {
visibility: visible;
top: 100%;
background: blue;
}
ul li a:hover::after {
visibility: visible;
top: 0;
background: blue;
}
Expected result:

Answer 1

I've re-created the example in your GIF.
For the text hover effect, make sure to use transition to ease the effect, e.g.:
a {
color: white;
text-decoration: none;
transition: 800ms ease color;
display: block;
}
a:hover {
color: gold;
}
I'm displaying the a tag as block to make sure it covers the whole li elements when hovered.
When using CSS pseudo elements always set a content property (content: '' is you want to style it):
li::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 5px;
background: gold;
opacity: 0;
}
Instead of using a border, I'm animating the pseudo before en after elements on hover. You can do this by using CSS keyframes.
li:hover::before {
opacity: 1;
animation: flyDown 300ms ease forwards;
}
li:hover::after {
opacity: 1;
animation: flyUp 300ms ease forwards;
}
#keyframes flyDown {
from {
transform: translateY(0px)
}
to {
transform: translateY(90px)
}
}
#keyframes flyUp {
from {
transform: translateY(00px)
}
to {
transform: translateY(-90px)
}
}
Please find jsfiddle here: https://jsfiddle.net/sanderdebr/fn4pgwv6/30/

Answer 2

---html---
<span class="a-border" onclick="menuclick(this)">ABOUT US</span>
<span class="a-border" onclick="menuclick(this)">CREATERS</span>
<span class="a-border" onclick="menuclick(this)">NEWS</span>
<span class="a-border" onclick="menuclick(this)">CONTACT</span>
---css---
a {
text-decoration: none;
}
a:hover {
cursor: pointer;
}
.a-border {
display: inline-block;
position: relative;
color: white;
padding: 0.5rem 0.25rem;
margin: 0 1.5rem;
overflow: hidden;
}
.a-border::after {
content: "";
display: block;
position: absolute;
bottom: -8px;
left: -3%;
width: 106%
border-top: 2px solid white;
transform: scale(0, 1);
transform-origin: 0% 100%;
transition: transform 0.4s;
}
a:hover .a-border::after {
transform:scale(1, 1);
}
a.focused .a-border::after {
transform: none;
}
---js---
function menuclick(underline) {
var focused = document.getElementsByClassName("focused");
var i;
for (i = 0; i < focused.length; i++) {
var under = focused[i];
if (under.classList.contains('focused')) {
under.classList.remove('focused');
}
}
if (!underline.parentElement.classList.contains('focused')) {
underline.parentElement.classList.add('focused');
}
}