title: Draw line with span when hover over link
body: <p>I am trying to draw a line under the link when hovering over it. Something similar like this: <a href="https://codepen.io/tsimenis/pen/BKdENX" rel="nofollow noreferrer">https://codepen.io/tsimenis/pen/BKdENX</a></p>
  
  <p>So, I tried to add <code>width: 0%;</code> on <code>.underline</code> class, and then <code>width: 100%;</code> on hover, but it doesn't work. What am I doing wrong? </p>
  
  <pre><code>.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%;
  }
  &lt;nav id="site-navigation" class="main-navigation"&gt;
  
  &lt;div class="menu-primary-menu-bottom-container"&gt;
    &lt;ul id="primary-menu-bottom" class="menu nav-menu" aria-expanded="false"&gt;
       &lt;li id="menu-item-29" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-29"&gt;&lt;a href="https://salt-nemanjamandic.c9users.io/te-koop/"&gt;te koop&lt;/a&gt;&lt;span class="underline"&gt;&lt;/span&gt;&lt;/li&gt;
       &lt;li id="menu-item-28" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-28"&gt;&lt;a href="https://salt-nemanjamandic.c9users.io/design/"&gt;design&lt;/a&gt;&lt;span class="underline"&gt;&lt;/span&gt;&lt;/li&gt;
       &lt;li id="menu-item-27" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-27"&gt;&lt;a href="https://salt-nemanjamandic.c9users.io/kijkappartement/"&gt;kijkappartement&lt;/a&gt;&lt;span class="underline"&gt;&lt;/span&gt;&lt;/li&gt;
       &lt;li id="menu-item-26" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-26"&gt;&lt;a href="https://salt-nemanjamandic.c9users.io/realisaties/"&gt;realisaties&lt;/a&gt;&lt;span class="underline"&gt;&lt;/span&gt;
    &lt;/ul&gt;
  &lt;/div&gt;      
  &lt;/nav&gt;
  </code></pre>