navtext[data-elem-type="text"] a:hover { /* цвет ссылки после наведения */ color: #5A3CFF !important; } navtext[data-elem-type="text"] a::after { content: ''; position: absolute; transition: all 0.3s ease; margin: auto; /* отступ между ссылкой и подчеркиванием; если нужно сделать расстояние больше, то используй отрицательное значение */ margin-bottom: 3; /* толщина подчеркивания */ height: 1; /* цвет подчеркивания до наведения */ background: #bdbdbd; opacity: 1; top: auto; bottom: 0; left: auto; right: 0; width: 0; } navtext[data-elem-type="text"] a:hover::after { /* цвет подчеркивания после наведения */ background: #5A3CFF; opacity: 1; top: auto; bottom: 0; left: 0; right: auto; width: 100%; }