Sottolineatura animata per un testo.

Come realizzare delle sottolineature animate con l'ausilio di HTML e CSS con le transizioni e lo pseudo elemento after.

In tutti gli Editor esiste il bottone per sottolineare un testo che in genere si trova accanto a quelli del grassetto (B)  e del corsivo (I) e che è denotato con la lettera (U). In tutti e tre i casi vengono utilizzate le iniziali delle analoghe espressioni inglesi Bold, Italic e Underline. Volendo si può rendere la sottolineatura un po' più originale utilizzando i CSS e ricordando che in fondo una linea sotto il testo non è altro che un bordo. Un modo per sottolineare delle parole potrebbe essere questo

<span style="border-bottom: 2px solid red;">Testo da sottolineare</span>

che produce il risultato seguente

Testo da sottolineare

con lo stile del bordo che può essere modificato e che in questo caso propone una linea continua di colore rosso e di spessore di 2 pixel. Questo modo di sottolineare può essere reso ancora più sofisticato rendendo la sottolineatura visibile e animata solo quando ci si passi sopra con il mouse

Prova a passare con il mouse sopra a questa linea

Si tratta di una sottolineatura che procede da sinistra a destra ma possiamo creare delle sottolineature simili da destra a sinistra o anche che partano dal centro

Testo con sottolineatura da destra a sinistra

Testo con sottolineatura che parte dal centro

Per ottenere questo risultato si possono inserire i CSS nel modello oppure direttamente nel post in Modalità HTML. Nel template si incolla il codice subito sopra alla riga </head> mentre nel post o nella pagina statica va incollata subito all'inizio andando su HTML

<style>
/* DA SINISTRA A DESTRA */
.un-sin-des {
display: inline-block;
}
.un-sin-des:after {
content: '';
display: block;
height: 3px;
width: 0;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
.un-sin-des:hover:after {
width: 100%;
background: #940f04;
}
/* DA DESTRA A SINISTRA */
.un-des-sin {
    display: inline-block;
    position: relative;
    padding-bottom: 3px;
}
.un-des-sin:after {
    content: '';
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    height: 3px;
    width: 0;
    background: transparent;
    transition: width .5s ease, background-color .5s ease;
}
.un-des-sin:hover:after {
    width: 100%;
    background: #940f04;
}
/* DAL CENTRO AGLI ESTREMI */
.un-centro {
    display: inline-block;
    position: relative;
    padding-bottom: 3px;
}
.un-centro:after {
    content: '';
    display: block;
    margin: auto;
    height: 3px;
    width: 0px;
    background: transparent;
    transition: width .5s ease, background-color .5s ease;
}
.un-centro:hover:after {
    width: 100%;
    background: #940f04;
}
</style>

Per ottenere la sottolineatura animata non serve altro che postare il testo da sottolineare in Modalità HTML con questa struttura di codice scegliendo la regola appropriata

<div class="un-sin-des">Testo con sottolineatura da sinistra verso destra</div>
<div class="un-des-sin">Testo con sottolineatura da destra verso sinistra</div>
<div class="un-centro">Testo con sottolineatura che parte dal centro</div>

Credo che sia superfluo ricordare che con le vecchie versioni di Internet Explorer questo codice non funzionerà. Concludo ricordando che si può ovviamente personalizzare la sottolineatura per quello che riguarda lo spessore (3 px), la durata (mezzo secondo .5s) e il colore (#940F04).

Fonte | Brad S. Knutson -