В моем случае это плавное подчеркивание слева направо.
a {
position: relative;
text-decoration: none;
&::after {
position: absolute;
content: "";
left: 0;
bottom: 0;
display: block;
width: 0;
height: 1px;
background: #000;
transition: all 0.3s;
}
&:hover::after {
width: 100%;
}
}
Отключаем стандартное подчеркивание. Создаем псевдоэлемент — линию в 1px и задаем ширину 0. При наведении ширина становится 100%.