Trying to achieve a scrolling line effect beneath anchor links for a client project led me to attempt some CSS3 coding, only to find myself stuck with an elusive bug after spending hours on it. The issue arises on mobile devices (iOS and Android) where, upon clicking a link, the animation runs but requires a second click to trigger the link itself (same issue on the provided codepen). Can anyone shed some light on this perplexing situation?
http://codepen.io/pablodancer/pen/ZLJVOP
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%;
}<ul>
<li class="active"><a href="http:www.nme.com">nme</a></li>
<li><a href="http:www.bbc,co.uk">bbc</a></li>
<li><a href="">blah3</a></li>
<li><a href="">blah4</a></li>
<li><a href="">blah5</a></li>
</ul>