problem description
when writing a simple page, use scaleX + pseudo elements to do an extended animation, and it is found that there is residue at the bottom of the animation when shrinking
.related codes
@transition-function: cubic-bezier(.4, 0, .2, 1);
a:before {
position: absolute;
content: "";
height: 2px;
background-color: rgba(30, 144, 255, 1.0);
transition: 200ms @transition-function;
transform: scaleX(0);
width: 100%;
bottom: 0px;
top: auto;
}
a:hover {
&:before {
transform: scaleX(1);
}
} screenshot of the situation
Chrome 71.0.3569.0
Windows 10 1809 (17763.1)