Html iPhone中的首次点击链接不起作用

我创建了一个使用css伪类的链接。如css中所示（：before）。安德里欧的设备一切都很好，但在iPhone中，它在第二次点击时工作。为什么。。。？如果有什么解决办法，请帮助我

.link{float:left；}
.链接a{
颜色：#000；
字体大小：15px；
字体大小：400；
填充：10px；
显示：内联块；
边框：1px实心#b6fe54；
-webkit过渡：所有.5s轻松输入输出；
-moz过渡：所有.5s轻松输入输出；
-o型过渡：所有。5s易进易出；
过渡：全部。5s轻松进出；
位置：相对位置；
}
链接a：之前{
位置：绝对位置；
内容：“；
宽度：0px；
背景：b6fe54；
左：0px；
顶部：0px；
身高：100%；
z指数：-1；
-webkit过渡：所有.5s轻松输入输出；
-moz过渡：所有.5s轻松输入输出；
-o型过渡：所有。5s易进易出；
过渡：全部。5s轻松进出；
}
链接a：悬停：在{
宽度：100%；
}

添加以下内容

<script>
var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
if(!iOS)
  document.write('\x3Cstyle>.link a:hover:before {width: 100%;}\x3C/style>');
</script>

var iOS=/iPad | iPhone | iPod/.test（navigator.userAgent）&！window.MSStream；
如果（！iOS）
document.write（'\x3Cstyle>.linka:hover:before{width:100%；}\x3C/style>）；

谢谢你的回答，但它停止了动画。@chandershekhar它解决了iphone的问题吗？除非您使用媒体查询或其他方式，否则您必须在iphone或deskop上进行选择。我想要这个动画also@chandershekhar你不能把它放在iPhone上。还有其他方法可以达到这个目的吗？