Draw line with span when hover over link

Question

I am trying to draw a line under the link when hovering over it. Something similar like this: https://codepen.io/tsimenis/pen/BKdENX

So, I tried to add width: 0%; on .underline class, and then width: 100%; on hover, but it doesn't work. What am I doing wrong?

.underline {
    border-bottom: 1px solid;
    width: 0%;
    float: inherit;
     -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}
.underline:hover{
    width: 100%;
}
<nav id="site-navigation" class="main-navigation">

<div class="menu-primary-menu-bottom-container">
  <ul id="primary-menu-bottom" class="menu nav-menu" aria-expanded="false">
     <li id="menu-item-29" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-29"><a href="https://salt-nemanjamandic.c9users.io/te-koop/">te koop</a><span class="underline"></span></li>
     <li id="menu-item-28" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-28"><a href="https://salt-nemanjamandic.c9users.io/design/">design</a><span class="underline"></span></li>
     <li id="menu-item-27" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-27"><a href="https://salt-nemanjamandic.c9users.io/kijkappartement/">kijkappartement</a><span class="underline"></span></li>
     <li id="menu-item-26" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-26"><a href="https://salt-nemanjamandic.c9users.io/realisaties/">realisaties</a><span class="underline"></span>
  </ul>
</div>      
</nav>

Answer 1

Here's a demo. Hope it helps!

In the demo

1. I set parent as a relative element
2. I use :after element as an underscore by positioning absolute on bottom of the li element

li {
  position: relative;
  display: inline-block;
}
li:after {
  content: "";
  position: absolute;
  left:0;
  top: 100%;
  width: 0;
  height: 2px;
  background-color: black;
  transition: width .3s ease-in-out;
}
li:hover:after {
  width: 100%;
}

<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>