Animation Underline / background-image

Im folgenden werden Links (Ankerelemente) mit einem animierten Unterstrich versehen.
Hier noch eine andere Variante, gleicher Effekt andere Vorgehensweise Animation Underline 1

Der Unterstrich besteht hier aus einem background-image: linear-gradient(90deg, black , black)
Keine Wiederholung, keine Breite, Höhe 2 Pixel, Position unten links.

Beim a:hover wird die Breite auf 100% gesetzt und die Transition sorgt für die Animation.

Siehe dazu den Tipp background

a {
    font-size: 1.5rem;
    color: #663DA0;
    text-decoration: none;
    background-image: linear-gradient(90deg, black, black);
    background-repeat: no-repeat;
    background-size: 0px 2px;
    background-position: left bottom;
    transition: all 1s;
}
a:hover {
   background-size: 100% 2px;
}