Generatore di sottolineatura animata per link (CSS)
Scegli l’effetto e passa il mouse (o usa Tab) sui link dell’anteprima. Il codice usa background-size, che funziona nei link su più righe.
Come si usaLink con sottolineatura che si muove
Questo paragrafo ha un link corto e anche un link molto più lungo che può andare a capo su due righe su smartphone per provare l’effetto.
Disponibile in: 
Generatore di sottolineatura animata per link (CSS): a cosa serve
Una sottolineatura che si anima al passaggio del mouse dà un tocco rifinito ai link di menu e testi. Fatta con ::after, funziona solo nei link su una riga; questo generatore disegna la linea con background-image e anima background-size, cosa che funziona anche quando il link va a capo.
Scegli tra cinque effetti (cresce da sinistra, dal centro, scorre, evidenziatore e ondulato), il colore, lo spessore e la durata. Una linea sottile resta sempre visibile per impostazione predefinita, perché il link si distingua dal testo come richiede la WCAG 1.4.1, e l’effetto compare anche al focus da tastiera.
Come si usa
- Scegli l’effetto.
- Regola il colore, lo spessore e la durata.
- Copia il CSS e applica la classe ai link.
Quando usarlo
- Menu di navigazione.
- Link dentro gli articoli.
- Footer ed elenchi di link.
Domande frequenti
Perché usare background e non un ::after?
Con uno pseudo-elemento ::after la linea funziona solo nei link su una riga. Disegnando la sottolineatura con background-image e animando background-size, la linea segue il testo anche quando il link va a capo su due righe.
Il link continua a sembrare un link?
In mezzo a un paragrafo, il link deve distinguersi dal testo anche senza il mouse sopra (WCAG 1.4.1). Per questo l’opzione di lasciare sempre visibile una linea sottile è attiva; l’effetto si anima sopra di essa.
E su smartphone?
Su smartphone non c’è il passaggio del mouse; l’effetto compare al focus e al tocco. La linea di base visibile garantisce che i link siano riconoscibili.
È davvero gratis?
Sì, 100% gratis. Senza registrazione, senza abbonamento e senza limiti d’uso. Tutti gli strumenti di Tools123 sono gratuiti.