An unpleasant bug was revealed, seen only on safari iPhones and seemingly like a reactor, if you add pseudo-selectors after / before to an element, then clicking on this element only works after the second tap. That is, the first tap underlines the link, the second tap already links the link. On the desktop and androde everything is ok. If you remove the before and after, then everything is ok, or if you check not on the reactor, then everything is ok too. How to get rid of this behavior?
.link-animation { position: relative; cursor: pointer; &::before{ position: absolute; content: ""; height: 1px; width: 0%; background-color: #333; transition: width .4s ease-in-out, left .4s ease-in-out; left: 50%; bottom: -3px; pointer-events: none; } &::after { position: absolute; content: ""; height: 1px; width: 0%; background-color: #333; transition: width .4s ease-in-out; left: 50%; bottom: -3px; pointer-events: none; } &:hover::before { width: 50%; left: 0px; } &:hover::after { width: 50%; } } .element { display: inline; font-size: 1.1rem; margin: 0 5px; color: #f54; transition: color ease .3s; cursor: pointer; text-decoration: none; @extend .link-animation; &:hover { color: #a54; } } Example - https://jsfiddle.net/mxutzufz/2/
.element { display: inline-block; }.element { display: inline-block; }? - Qwertiy ♦