Reputation: 425
I created a link that uses css pseudo classes. As seen in css (:before). Everything is fine in an Andriod device but in iPhone it's working on the second click Why...? if there is any solution please help me.
.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>
Upvotes: 2
Views: 851
Reputation: 13569
Add the following
<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>
Upvotes: 2