Text-decoration-line - Trucchi CSS

Anonim

La text-decoration-lineproprietà decora il testo con una sottolineatura, una sovratensione, una riga o una combinazione di tali righe.

p ( text-decoration-line: underline; )

Valori

  • none: non viene aggiunta alcuna riga e tutte le righe esistenti vengono rimosse, ad esempio nonerimuove la sottolineatura predefinita sui collegamenti.
  • underline: aggiunge una sottolineatura di 1 pixel sotto il testo.
  • overline: aggiunge un overline di 1 px sopra il testo.
  • line-through: aggiunge una riga di 1 pixel nel testo.
  • inherit: eredita la decorazione del genitore.

Il valore blinkè nella specifica W3C, ma è deprecato e non funzionerà in nessun browser corrente. Quando ha funzionato, ha fatto sembrare il testo "lampeggiare" spostandolo rapidamente tra 0% e 100% di opacità.

Combinazione di valori

È possibile combinare i underline, overlineo line-throughvalori in un elenco separato da spazi di aggiungere più linee di decorazione:

p ( text-decoration-line: overline underline line-through; )

Utilizzo

La text-decoration-lineproprietà è praticamente identica alla text-decorationproprietà originaria . Se tutto quello che vuoi fare è aggiungere una o più righe al tuo testo, text-decorationè una scelta migliore perché è supportato da tutti i browser, anche quelli molto vecchi. In genere, l'uso di una text-decoration-linedichiarazione ha senso solo quando si scrive una regola di stile a mano lunga che include text-decoration-styleo una text-decoration-colordichiarazione. Se vuoi usarli tutti e tre insieme, puoi usare la text-decorationproprietà stenografia .

Abbreviazione

text-decoration-linepuò essere utilizzato in combinazione con text-decoration-stylee text-decoration-colornella text-decorationproprietà CSS3 abbreviata (attualmente solo Firefox lo supporta completamente):

.underlined ( text-decoration: underline dotted red; )

Demo

Questa demo funzionerà su Safari, Firefox e Chrome con funzionalità della piattaforma web sperimentale abilitate. Il blinkvalore non è incluso.

Vedi la linea di decorazione del testo della penna di CSS-Tricks (@ css-tricks) su CodePen.

Relazionato

  • decorazione del testo
  • stile di decorazione del testo
  • testo-decorazione-colore
  • testo-decorazione-salto

Maggiori informazioni

  • text-decoration-line nelle specifiche W3C
  • text-decoration-line presso MDN

Supporto browser

Cromo Safari Firefox musica lirica IE Android iOS
31 * † 7.1 * 6 ‡ Nessuna Nessuna Nessuna 8 *

* con -webkitprefisso
† con funzionalità sperimentale della piattaforma Web flag abilitato
‡ 6 - 35 con -mozprefisso, non prefisso a partire da 36.