Il classico link sottolineato diventa animato grazie a qualche riga di codice CSS. Iniziamo togliendo a tutti i link la sottolineatura classica con questo codice:
a {
text-decoration: none;
position: relative;
color: #FF0000;
}
E’ necessario impostare anche la posizione relativa in modo da definire esattamente la posizione. Ora aggiungiamo il codice per l’animazione allo pseudo element :after. Una pseudo classe infatti non definisce un elemento ma uno stato che questo elemento raggiunge, in questo caso il selettore :after definisce uno stile dopo che l’elemento viene selezionato.
a:after {
content: '';
border-bottom: 1px solid #FF0000;
position: absolute;
bottom: 0;
left: 0;
width: 0%;
transition: 0.2s;
}
Il contenuto dell’elemento è impostato completamene ma grazie a width: 0% non compare nulla, solo quando il mouse passa sopra il link si vedrà l’animazione grazie al selettore :hover:after. Completiamo quindi l’animazione impostando la lunghezza al 100%. La sottolineatura, che in partenza era allo 0%, impiegherà 0.2 secondi per comparire da sinistra a destra grazie al comando transition. Se il cursore esce fuori dal link l’animazione esegue i comandi al contrario e torna al punto originale.
a:hover:after {
width: 100%;
}