<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;
  -webkit-box-decoration-break: clone;
  padding: 5px 0;
  line-height: 30px;
}

a:hover, a:focus {
  background-size: 100% 1px;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.