<div class="flex">
<a href="#">ссылка с анимацией в две строки</a>
<a href="#">ссылка с анимацией в две строки</a>
<a href="#">ссылка с анимацией в две строки</a>
<a href="#">ссылка с анимацией в две строки</a>
</div>
.flex{
display:flex;
//width: 100px;
}
a {
width: 100px;
margin-right: 20px;
color: blue;
text-decoration: none;
background-image: linear-gradient(currentColor, currentColor);
background-position: 0% 100%;
background-repeat: no-repeat;
background-size: 0% 1px;
transition: background-size .3s;
box-decoration-break: clone;
box-decoration-break: clone;
padding: 5px 0;
line-height: 30px;
}
a:hover, a:focus {
background-size: 100% 1px;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.