Das mit der Linie ist tatsächlich etwas komplizierter. Die Linie kann nicht mit text-decoration: underline; animiert werden, sondern muss ein separates HTML Element sein. So geht das zum Beispiel mit purem CSS:

a {
  /* Wichtig, damit sich die Breite des Links dem Text anpasst */
  display: inline-block;
}


a:hover {
  font-size: 200%;
  /* Wichtig, damit die Linie mit position: absolute; relative zum Link positioniert werden kann. */
  position: relative;
}


/* Durch ::after erscheint ein separates HTML Element innerhalb des Links */
a::after {
  content: "";
  display: block;
  background-color: black;
  /* bottom und left sind zur positioniertung der Linie */
  bottom: 0;
  left: 0;
  height: 2px;
  width: 0;
  /* Das width attribut wird animiert, mit einer Länge von 0.5 Sekunden */
  transition: width 0.5s ease-in-out;
}


/* Die Breite der Linie wird bei hover auf 100% gesetzt */
a:hover::after {
  width: 100%;
}

Hier wird die Animation mit transition gelöst. Alternativ könnte man auch css keyframes nutzen.