Animation Underline / ::after

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

Siehe dazu auch den Tipp Selektoren ::after

Siehe auch den Tipp Transition

Siehe Quelltext.
Das a Element wird zum inline-Block Element, damit man ihm eine Breite zuweisen kann und auch alle kommenden Eigenschaften funktionieren. Desweiteren wird der Unterstrich entfernt.
Dem a Element wird mit ::after ein leerer String mit einer Höhe von 2px und einer schwarzen Hintergrundfarbe angehängt. Außerdem bekommt es display block, damit es unter dem a liegt. Transition sorgt für eine Animation bei einer Eigenschaftsänderung.

Beim hover wird dieses Anhängsel auf eine Breite von 100% vergrößert und durch transition animiert.

a {
     display: inline-block;
    font-size: 1.5rem;
    color: #663DA0;
    text-decoration: none;
}
a::after {
    content: "";
    display: block;
    width: 0;
    height: 2px;
    background-color: black;
    transition: all 1s;
}
a:hover::after {
    width: 100%;
}