.animated-underline {
    position: relative; /* Позиционирует псевдоэлемент относительно текста */
    display: inline-block; /* Чтобы псевдоэлемент не растягивался на всю ширину */
    padding-bottom: 1px; /* Отступ для линии, чтобы не перекрывать текст */
}

.animated-underline::after {
    content: ''; /* Обязательное свойство для псевдоэлемента */
    position: absolute;
    bottom: 0; /* Расположение линии снизу текста */
    left: 0;
    width: 0; /* Изначально ширина 0 */
    height: 1px; /* Толщина линии */
    background-color: #D6DDDD; /* Цвет линии */
    transition: width 0.3s ease-out; /* Анимация ширины */
}

.animated-underline:hover::after {
    width: 100%; /* Ширина 100% при наведении */
}