<a>Длинный текст</a>

a {
  font-size:50px;
  position: relative;
  color: #00a650; /*задаём цвет ссылки*/
  cursor: pointer;
  line-height: 1; /*задаём высоту строки*/
  text-decoration: none; /*убираем подчёркивание*/

}
a:after {
  display: block;
  position: absolute;
  left: 0; /*изменить на right:0;, чтобы изменить направление подчёркивания */
  width: 0;/*задаём длинну линии до наведения курсора*/
  height: 2px; /*задаём ширину линии*/
  background-color: #00a650; /*задаём цвет линии*/
  content: "";
  transition: width 0.3s ease-out; /*задаём время анимации*/
}

a:hover:after,
a:focus:after {
  width: 100%; /*устанавливаем значение 100% чтобы ссылка подчёркивалась полностью*/
}