title: How to make animated text-decoration underline on hover
body: <p>I was able to apply <code>background-image</code> to anchor on <code>:hover</code> and now want it to be animated at the same time. How can I possibly achieve that?</p>
  <p><img src="https://i.stack.imgur.com/i0cEK.png" alt="enter image description here" /></p>
  <pre><code>.nav-content ul li a {
      display: inline-block;
      padding: 5px 0;
      text-decoration: none;
      color: #fff;
  }
  
  .nav-content ul li a:hover {
      text-decoration: none;
      background: url('dotted.gif') bottom repeat-x;
  }
  </code></pre>
  <blockquote>
  <p>Clarifying my question:</p>
  </blockquote>
  <p>What I am trying to achieve is that the underline <code>dotted.gif</code> image to be animated on the X axis continuously on hover. So far it just appears on hover</p>