Line under navbar when hovering
<p>I searched alot about this and couldn't find , how can I make something similar to the navbar here , when you hover on it a line under it will appear like a loading bar .
- example : <a href="http://www.thecrewgaming.com/" rel="nofollow">http://www.thecrewgaming.com/</a>
is it possible only with css or javascript is needed and how ? 
thanks !</p>

<p>I tried this </p>

<pre><code>li:hover {
    background-color: rgba(255, 245, 255, 0.2);
    border-bottom-color: #abcdef;
}
li {
    font-family: 'Poppins', sans-serif;
    font-weight: bold;
    color: #F5F5F5;
    font-size: 0.8889em;
    text-decoration: none;
    font-weight: normal;
    text-transform: uppercase;
    border-bottom: 3px solid transparent;
    padding-bottom: 0.125em;``
    transition: border-bottom-color 50ms linear 0s;
}
</code></pre>

<p>but it appears as a normal line and not like a loading bar in the page linked above .</p>