double tap ipad necessary for link with gradient on pseudo

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;
    });

});