title: On hover of a link, have a line run left to right underneath
body: <p>I'm trying to get a line to animate left to right underneath the hovered link in a list. Right now, nothing happens when hovered.</p>
  
  <p><a href="https://jsfiddle.net/60vufuv5/1/" rel="nofollow">https://jsfiddle.net/60vufuv5/1/</a></p>
  
  <p>This is an example of getting it to work on just a single link but I didn't have any luck in the fiddle above: <a href="https://jsfiddle.net/4bgkcoaq/" rel="nofollow">https://jsfiddle.net/4bgkcoaq/</a></p>
  
  <pre><code>&lt;nav class="contact-nav"&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;span class="name_2"&gt;&lt;a href="mailto:xxx@gmail.com"&gt;xxx@gmail.com&lt;/a&gt;&lt;div class="slider"&gt;&lt;/div&gt;&lt;/span&gt;&lt;/li&gt;
      &lt;li&gt;+1-347-419-7751&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/nav&gt;
  
  
  li name_2:hover &gt; .slider {
    width: 100%;
  }
  </code></pre>