Я пытаюсь воссоздать анимацию для описания и просмотра здесь. Подчеркивание анимируется справа налево, когда ссылка отключена, а подчеркивание подчеркивается слева направо, прежде чем она исчезнет.
a {
color:#00f;
text-decoration:none;
display:inline-block;
}
a:after {
width: 0;
display:block;
background:#00f;
height:3px;
transition: all .5s ease-in-out;
content:"";
}
a:hover {
color:#00f;
}
a:hover:after {
width:100%;
}
<a href="#">Click first</a>
<a href="#">Click second</a>