a::after {
content: "";
background-color: #000;
width: 0;
display: block;
transition: 0.2s;
}
a:hover::after {
animation: linha-menu 0.2s linear forwards;
animation-direction:alternate;
}
@keyframes linha-menu{
0% {
width: 0;
height: 2px;
border-bottom-color: transparent;
}
100% {
width: 100%;
height: 2px;
border-bottom-color: #000;
}
}
Fiz uma animação para aparecer uma linha da esquerda para a direita em baixo do link ao passar o mouse, estou tentando fazer com que a animação reverta quando o usuário tirar o mouse de cima, como faço?