<@a href="#" class="underline">Наведи курсор!@>
.underline {
position: relative;
cursor: pointer;
font-size: 24px;
text-decoration: none;
}
.underline:after {
display: block;
position: absolute;
right: 0;
bottom: -3px;
width: 0;
height: 2px;
background-color: black;
content: "";
transition: width 0.5s;
}
.underline:hover:after {
width: 100%;
display: block;
position: absolute;
left: 0;
bottom: -3px;
height: 2px;
background-color: black;
content: "";
transition: width 0.5s;
}