КРАСИВОЕ CSS ПОДЧЕРКИВАНИЕ ЭЛЕМЕНТОВ

.css

a{
display: inline-block;
position: relative;
text-decoration: none;
}

a::before{
display: block;
position: absolute;
content: "";
height: 2px;
width: 0;
background-color: red;
transition: width .5s ease-in-out, left .5s ease-in-out;
left: 50%;
bottom: 0;
}

a::after{
display: block;
position: absolute;
content: "";
height: 2px;
width: 0;
background-color: red;
transition: width .5s ease-in-out;
left: 50%;
bottom: 0;
}

a:hover::before{
width: 50%;
left: 0;
}
a:hover::after{
width: 50%;
}

.html

<a href="#">ссылка</a>