double tap ipad necessary for link with gradient on pseudo - ipad

Question

On my main navigation, links have a custom underline with linear-gradient on background. It works great but on ipad, I need to tap twice to execute link. One for the hover, another one for the link. What can I do to solve it ?
Thanks
Here is an example :
http://codepen.io/anon/pen/yOmXby
HTML :
<ul>
<li><a target="_blank" href="#">element</a></li>
<li><a target="_blank" href="#">element</a></li>
<li><a target="_blank" href="#">element</a></li>
<li><a target="_blank" href="#">element</a></li>
<li><a target="_blank" href="#">element</a></li>
</ul>
CSS :
li {
list-style: none;
float: left;
margin: 0 1em;
}
ul li a {
text-decoration: none;
text-transform: uppercase;
font-size: 1.5rem;
margin-left: 60px;
height: 30px;
line-height: 30px;
vertical-align: middle;
position: relative;
display: inline-block;
}
ul li a:before {
-webkit-transform: translateX(-50%) translateY(0);-ms-transform: translateX(-50%) translateY(0);transform: translateX(-50%) translateY(0);
-webkit-transition: all 0.4s ease 0s;transition: all 0.4s ease 0s;
content: "";
position: absolute;
bottom: 0;
left: 50%;
height: 3px;
background: #e95b4c;
width: 0;
opacity: 0;
will-change: opacity;
}
ul li a:hover:before, ul li a:focus:before, ul li a:active:before {
width:100%;
opacity: 1;
}

Answer 1

Well the only solution I found is in javascript.
Every touch on link execute the link :
$(document).ready(function() {
$('a').on('click touchend', function(e) {
var el = $(this);
var link = el.attr('href');
window.location = link;
});
});