title: Link with pseudo element double tap issue in iOS
body: <p>I would like to achieve the effect of a scrolling line beneath anchor links to meet a client brief - I stupidly imagined a bit of CSS3 would easily achieve this without any bother, so I've setup something along the lines of the following code, and spent the past hour banging my head on the desk due to a very annoying bug I don't understand.</p>
  
  <p>Everything works great on desktop, but on mobile (both iOS and Android) I experience an issue when I select a link - <strong>First click, the animation runs, and I have to click a second time to trigger the link</strong> (same happens with below codepen). It's baffling me and I wonder if anyone can shine any light on things for me!!?</p>
  
  <p><a href="http://codepen.io/pablodancer/pen/ZLJVOP" rel="nofollow noreferrer">http://codepen.io/pablodancer/pen/ZLJVOP</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>li {
    display: inline-block;
    list-style-type: none;
  }
  li a {
    text-decoration: none;
    position: relative;
    line-height: 1;
    height: auto;
    padding: 0;
    margin-right: 8px;
    padding-bottom: 8px;
    z-index: 1;
  }
  li a:after {
    display: block;
    left: 0;
    bottom: 0;
    margin-top: 4px;
    width: 0;
    height: 5px;
    background-color: blue;
    content: "";
    z-index: -3;
    transition: width 0.3s;
  }
  li a:hover:after,
  li.active a:after {
    width: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul&gt;
    &lt;li class="active"&gt;&lt;a href="http:www.nme.com"&gt;nme&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="http:www.bbc,co.uk"&gt;bbc&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=""&gt;blah3&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=""&gt;blah4&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=""&gt;blah5&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>