Эффектные ссылки, Вопрос по transition

Курсы §24. Мастерская: декоративные эффекты. Часть 2
1

Здравствуйте, подскажите пожалуйста, https://htmlacademy.ru/courses/76/run/10 - в этой части немного дополнил трансформацию, чтобы псевдоэлементы не только меняли положение, но и расширялись до 120px по наведению, делая полноценную нижнюю и верхнюю границы над текстом, а также задал transition: width 0.5s; И вопрос такой, когда мы убираем курсор, элементы возвращаются в свое положение справа и слева от ссылки, но высота у них еще 120px , она возвращается обратно, но как сделать так чтобы обратный переход к размеру был мгновенный, а не 0.5s?

2

Скорее всего с помощью анимации уже.
Примерно так:

.effect-2 a:hover::before,
.effect-2 a:hover::after {
    opacity: 1;
}

.effect-2 a:hover::before {
    animation: move1 0.5s ease-in-out;
    animation-fill-mode: forwards;
}

.effect-2 a:hover::after {
    animation: move2 0.5s ease-in-out;
    animation-fill-mode: forwards;
}
@keyframes move1 {
    100% {
        left: 50%;
        transform: rotate(0deg) translateX(-50%);
        width: 120px;
    }
}
@keyframes move2 {
    100% {
        right: 50%;
        transform: rotate(0deg) translateX(50%);
        width: 120px;
    }
}