How to get EpicGame's navbar transitions when hovering over link? - html

Question

When you hover over, say, 'News', a blue underline will pop-in. From what I've seen, it is actually a background with a height transition from 0px -> 5px. However, my code is unable to replicate it.
* {
padding: 0;
margin: 0;
}
.navbar {
padding: 28px 36px;
background: black;
}
.navbar ul {
list-style: none;
}
.navbar li {
padding: 0 8px;
height: 100%;
position: relative;
transform: translateZ(0);
}
.navbar li::before {
display: block;
position: absolute;
bottom: 0;
left: 0;
z-index: -1;
background: blue;
transition: height .2s ease-in-out;
}
a {
display: block;
text-decoration: none;
color: white;
}
<div class="navbar">
<ul>
<li>Home
</ul>
</div>
I'm definitely missing something obvious here, but I don't get it. Help?

Answer 1

If I got you right, you did the most of the work, but you should always keep in mind when you using pseudo-elements like ::before you have to declare content property in it, otherwise it won't work at all. Then to make this work, you should just care about making the transition by putting initial with and height on ::before then make the height element to the actual one in hover.
So your final code should be something like this:
* {
padding: 0;
margin: 0;
}
.navbar {
padding: 28px 36px;
background: black;
}
.navbar ul {
list-style: none;
}
.navbar li {
padding: 0 8px;
height: 100%;
position: relative;
transform: translateZ(0);
}
.navbar li::before {
content: '';
display: block;
position: absolute;
bottom: 0;
left: 0;
z-index: -1;
width: 50px;
height: 0;
background: blue;
transition: height .2s ease-in-out;
}
.navbar li:hover::before {
height: 5px;
}
a {
display: block;
text-decoration: none;
color: white;
}
<div class="navbar">
<ul>
<li>Home
</ul>
</div>