Come sottolineare un link al passaggio del mouse sopra?

In questo tutorial vediamo un bellissimo effetto di sottolineatura di un link quando mouse vi passa sopra. Vediamo un piccolo frammento del codice CSS cosi detto snippet  per realizzare questo effeto di sottolineatura. Con pseudo-classe :hover e la magia di CSS3, si possa creare effetti molto belli.

 

Snippet mostrato oggi non rappresenta qualcosa di sorprendente e insolito. Tutto è abbastanza modesto, vediamo semplicemente cambiare il colore del testo e aggiungere una animazione di sottolineatura  che parte da sinistra  mettendo in evidenza il collegamento al passagio del mouse sopra di esso.

 

Mi limiterò a descrivere solo il codice CSS, perché nella marcatura HTML non cambierà niente sapiamo gia che un link viene realizzato con il tag <a> e quindi rimanerà cosi.

In primo luogo, utilizzando le proprietà line-height: impostare l'interlinea, a seconda del font che state utilizzando il  valore può essere diverso. Trasformismo il nostro link in elemento inline-block tramite la proprieta display. Eliminiamo sottolineatura standard agiungendo la proprieta  text-decoration: none; e coloriamo il nostro link nel colore voluto.

a {
    line-height: 1;
    display: inline-block;
    color:#ffeb3b;
    text-decoration:none;
    cursor: pointer;
}

Dopo di che utilizzeremo  pseudo-ellemento :after per agiungere un elemento in piu, in questo caso, un alinea sotto e creeremo un semplice effetto di  transizione con aiuto della proprieta  transition:. Largezza  della linea che passera sotto, inizialmente impostiamo come valore a zero width:0% e come altezza impostiamo di  height:2px. Colore della linea può essere qualsiasi, nell'esempio ho scelto uno al caso.

a:after {
    display: block;
    content: "";
    height: 2px;
    width: 0%;
    background-color: #ffeb3b;
    transition: width .3s ease-in-out;
}

Diciamo che il lavoro e quasi finito mancano poche righe di codice. Con aiuto di pseudo-classi :hover e :focus realizzeremo lo stile dei link quando si passa sopra con il mouse nel primo, e con il secondo quando si utlizza la tastiera e siamo sul link ma non l'ambiamo ancora cliccato. Qui si cambia la larghezza, e si passa al 100%.
Ora, quando si sposta  sul link, la linea di sottolineatura stilizzata scorrerà da sinistra a destra con un piccolissimo ritardo indicato nella proprieta transition  catturando cosi  lo sguardo dell'utente.

a:hover:after,
a:focus:after {
    width: 100%;
}

E come risultato avremo questo effetto

Sposta il cursore sul link di esemio , per vedere l'effetto.

 

Qui sotto potrai vedere il codice completo che puoi sempre copiare nella tua librerie di snippet

Cliccare per aprire lo spoiler

a {
    line-height: 1;
    display: inline-block;
    color:#ffeb3b;
    text-decoration:none;
    cursor: pointer;
}
a:after {
    display: block;
    content: "";
    height: 2px;
    width: 0%;
    background-color: #ffeb3b;
    transition: width .3s ease-in-out;
}
a:hover:after,
a:focus:after {
    width: 100%;
}

Naturalmente, questa è solo una versione di questo effetto. Sperimentando, cambiando colore, utilizzando l'animazione, magari far scorrere da destra a sinistra, creare altri effetti  come capovolgimento del testo del link  puoi realizzare dei effetti molto interessanti.

Letto 349 volte

corso CSS pratica

Impara HTML e CSS da zero al risulto!

Da piccolo hai imparato leggere leggendo libri. E con aiuto del nostro corso imparerai CSS e HTML costruendo un sito web da un templat in PSD .

Scopri il corso