title: CSS underline is not moving on click
body: <p>I am trying to create sliding horizontal line on click of hyperlinks. Please have a look at:
  <a href="http://codepen.io/anon/pen/JdEPPb">http://codepen.io/anon/pen/JdEPPb</a></p>
  
  <p>The HTML is:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>    * {
        box-sizing: border-box;
      }
      
      body {
        font: 300 100% 'Helvetica Neue', Helvetica, Arial;
      }
      
      .container {
        width: 50%;
        margin: 0 auto;
      }
      
      ul li {
        display: inline;
        text-align: center;
      }
      
      a {
        display: inline-block;
        width: 25%;
        padding: .75rem 0;
        text-decoration: none;
        color: #333;
      }
      
      .one:active ~ hr {
        margin-left: 0%;
      }
      .two:active ~ hr {
        margin-left: 25%;
      }
      
      .three:active ~ hr {
        margin-left: 50%;
      }
      
      .four:active ~ hr {
        margin-left: 75%;
      }
      
      hr {
        height: .25rem;
        width: 25%;
        margin: 0;
        background: tomato;
        border: none;
        transition: 0.3s ease-in-out;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;div class="container"&gt;
        &lt;ul&gt;
          &lt;li class="one"&gt;&lt;a href="#"&gt;Uno&lt;/a&gt;&lt;/li&gt;&lt;!--
       --&gt;&lt;li class="two"&gt;&lt;a href="#"&gt;Dos&lt;/a&gt;&lt;/li&gt;&lt;!--
       --&gt;&lt;li class="three"&gt;&lt;a href="#"&gt;Tres&lt;/a&gt;&lt;/li&gt;&lt;!--
       --&gt;&lt;li class="four"&gt;&lt;a href="#"&gt;Quatro&lt;/a&gt;&lt;/li&gt;
          &lt;hr /&gt;
        &lt;/ul&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>There is no javascript code.</p>
  
  <p>When I click Two, I want the underline to move under Two but currently its not moving. I need to hold for longer for it to move and when I release the mouse left button, it falls back to One</p>