Draw line with span when hover over link

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>