My link that utilizes css pseudo classes is behaving differently on Android compared to iPhone. Strangely, it only works on the second click on the iPhone. Can anyone provide a solution for this issue?
.link{float:left;}
.link a {
color: #000;
font-size: 15px;
font-weight: 400;
padding: 10px;
display: inline-block;
border: 1px solid #b6fe54;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
position: relative;
}
.link a:before {
position: absolute;
content: "";
width: 0px;
background: #b6fe54;
left: 0px;
top: 0px;
height: 100%;
z-index: -1;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
.link a:hover:before {
width: 100%;
}<div class="link"><a href="https://www.google.co.in" target="_blank">Learn More</a></div>