.animated-link {
    position: relative; /* Устанавливаем относительное позиционирование */
    color: #000; /* Цвет текста */
    text-decoration: none; /* Убираем стандартное подчеркивание */
}

.animated-link::after {
    content: ''; /* Создаем псевдоэлемент */
    position: absolute; /* Абсолютное позиционирование */
    left: 0; /* Начинаем с левого края */
    bottom: -4px; /* Устанавливаем отступ в 4 пикселя от нижнего края текста */
    width: 100%; /* Ширина псевдоэлемента равна ширине текста */
    height: 1px; /* Высота линии */
    background-color: #fff; /* Цвет линии (белый) */
    transform: scaleX(0); /* Начальное состояние - линия скрыта */
    transition: transform 0.3s ease; /* Анимация при изменении состояния */
}

.animated-link:hover::after {
    transform: scaleX(1); /* При наведении линия появляется */
}