CSS
HTML
JavaScript
PHP
Introduzione
Coming Soon
Generatori
Varie

CSS text-decoration-line

La proprietà CSS3 text-decoration-line definisce il tipo di linea decorativa del testo

La proprietà text-decoration-line controlla quali tipi di decorazioni lineari devono essere applicate al testo: sottolineatura, linea sopra o barratura. È particolarmente utile quando si vuole combinare più decorazioni in modo preciso.

Sintassi

text-decoration-line: none | underline | overline | line-through | combination;

Significato dei valori principali:

  • none: Nessuna decorazione applicata.

  • underline: Aggiunge una linea sotto il testo.

  • overline: Aggiunge una linea sopra il testo.

  • line-through: Aggiunge una linea che attraversa il testo.

  • combinazioni multiple: È possibile usare più valori separati da spazi, ad esempio underline overline.


Esempio proprietà: text-decoration-line


Codice Esempio: text-decoration-line

CODE: CSSpreleva codice
  1. .line-example {
  2.   font-size: 22px;
  3.   margin-bottom: 10px;
  4. }
  5.  
  6. .underline-line {
  7.   text-decoration-line: underline;
  8. }
  9.  
  10. .overline-line {
  11.   text-decoration-line: overline;
  12. }
  13.  
  14. .line-through-line {
  15.   text-decoration-line: line-through;
  16. }
  17.  
  18. .combo-line {
  19.   text-decoration-line: underline overline;
  20. }

Contenuto Esempio: text-decoration-line

Esempio di utilizzo di text-decoration-line

In questo esempio, la proprietà text-decoration-line viene usata per applicare decorazioni differenti al testo:


Testo sottolineato
Testo con linea sopra
Testo barrato
Testo con sottolineatura e linea sopra

CSS e HTML per text-decoration-line:

  
  <style>
    .line-example {
      font-size: 22px;
      margin-bottom: 10px;
    }

    .underline-line {
      text-decoration-line: underline;
    }

    .overline-line {
      text-decoration-line: overline;
    }

    .line-through-line {
      text-decoration-line: line-through;
    }

    .combo-line {
      text-decoration-line: underline overline;
    }
  </style>

  <div class="line-example underline-line">Testo sottolineato</div>
  <div class="line-example overline-line">Testo con linea sopra</div>
  <div class="line-example line-through-line">Testo barrato</div>
  <div class="line-example combo-line">Testo con sottolineatura e linea sopra</div>
  

Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.

Supporto Browser

Browser Support

I Cookie su questo sito:

Il nostro sito utilizza cookie e altre tecnologie in modo tale che sia noi, sia i nostri partner, possiamo ricordarci di te e capire come tu e gli altri visitatori utilizzate il nostro sito. Qui puoi trovare ulteriori informazioni sui cookie e le altre tecnologie. Chiudendo questo banner o continuando la navigazione acconsenti all'uso dei cookie. Acconsento Info Cookies