Анимация наведения — задержка подчеркивания до завершения анимации наведения ⇐ CSS

[Anonymous]

Я столкнулся с проблемой при реализации эффекта наведения на подчеркнутые ссылки с помощью SCSS. Я хочу создать переход, при котором при наведении курсора цвет текста меняется на красный, а подчеркивание на мгновение исчезает, а затем перерисовывается красным слева направо. Когда наведение сначала завершается, красная линия подчеркивания должна исчезнуть, и только затем снова должна появиться исходная черная линия (без анимации). Первый шаг работает, однако у меня возникли проблемы с тем, чтобы переход от наведенного элемента завершился до отображения ненаведенного элемента. Я пробовал экспериментировать с задержкой перехода, но безрезультатно. Вы можете увидеть проблему в следующем коде — обратите внимание, как появляется черная линия ДО того, как красная линия полностью сжимается при окончании наведения (при отпускании мыши). Можете ли вы помочь?

Код: Выделить всё

a {
position: relative;
text-decoration: underline;
color: black;
transition: color 0.3s;
}

a::before {
content: '';
position: absolute;
width: 0;
height: 1px;
bottom: 0;
left: 0;
background-color: red;
transition: width 0.3s;
}

a:hover {
text-decoration: none;
color: red;
}

a:hover::before {
width: 100%;
}

Код: Выделить всё

[url=google.com]My link to Google[/url]

Подробнее здесь: https://stackoverflow.com/questions/784 ... n-finishes