Wie kann ich eine coole Link Animation umsetzen? (HTML & CSS)

Wir alle haben die Animationen schon gesehen die bei einem Mouse Hover startet (Mouse Hover ist ja der Zustand der herrscht wenn man mit der Maus über ein Element ist). Ich sehe die Frage auch heute noch täglich – wie man denn sowas machen kann. Ja selbst in WordPress wird das sehr oft gefragt. Viele denken das es absolut kompliziert ist. Dabei ists einfach ein a Zustand, a:after und ein a:hover Zustand.

In diesem kleinen Video möchte ich euch das mal kurz zeigen und genau erklären. Man sieht sehr schön dass man nur wenig Zeilen CSS einbauen muss und dann kann man da sehr viel an seine eigenen Wünsche und Ideen anpassen.

Video

HTML

<nav>
        <a href="#">Home</a>
        <a href="#">Über mich</a>
        <a href="#">Links</a>
        <a href="#">Social Media</a>
        <a href="#">Kontakt</a>
    </nav>

CSS

nav{
    height: 100vh;
    width: 100vh;
    min-width: 600px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin: auto;
}
a{
    position: relative;
    text-decoration: none;
    color: #a0a0a0;
    font-size: 25px;
    letter-spacing: 5px;
}
a:after{
    content: "";
    position: absolute;
    /*background-color: #edb059; /* 237,176,89 */
    background-color: rgba(237,176,89,1);
    transform: rotate(-10deg);
    height: 20px; /* wie hoch der strich */
    width: 0%; /* wie lange der strich */
    left: 0;
    bottom: -10px;
    transition: 300ms;
}
a:hover:after {
    width: 100%;   
}