/* Стили для ссылок внутри вашего класса .custom-link */
.custom-link a {
    text-decoration: none; /* Убираем стандартное подчеркивание */
    position: relative;
    color: inherit; /* Ссылка наследует цвет текста */
    transition: color 0.3s ease;
}

/* Создаем линию под текстом */
.custom-link a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px; /* Расстояние от текста до линии */
    width: 100%;
    height: 1px; /* Толщина линии */
    background-color: currentColor; /* Цвет линии как у текста */
    
    /* Начальное состояние: линия невидима (масштабирована в 0) */
    transform: scaleX(0);
    transform-origin: right; /* Анимация уходит вправо */
    transition: transform 0.3s ease;
}

/* Эффект при наведении и фокусе (клике) */
.custom-link a:hover::after,
.custom-link a:focus::after {
    transform: scaleX(1);
    transform-origin: left; /* Анимация появляется слева */
}

/* Опционально: небольшое изменение прозрачности или цвета самой ссылки */
.custom-link a:hover {
    opacity: 0.8;
}