Sintassi

Significato dei valori principali:

• auto: spessore predefinito basato sulla dimensione del font (valore di default).

• from-font: usa lo spessore definito dal font stesso (se disponibile).

• lunghezza (es: 2px, 0.1em): imposta uno spessore specifico per la decorazione.

• percentuale: calcolata rispetto alla dimensione del font.

Nota: Questa proprietà funziona solo in combinazione con text-decoration-line (es. underline).

Esempio proprietà: text-decoration-thickness

Codice Esempio: text-decoration-thickness

CODE: CSS

1. .thick-underline {

2.   text-decoration-line: underline;

3.   text-decoration-color: #e06c75;

4.   text-decoration-thickness: 4px;

5.   font-size: 24px;

6.   font-weight: bold;

7. }

9. .thin-underline {

10.   text-decoration-line: underline;

11.   text-decoration-color: #56b6c2;

12.   text-decoration-thickness: 1px;

13.   font-size: 24px;

14.   font-weight: bold;

15. }

Contenuto Esempio: text-decoration-thickness

  
  <style>
    .thick-underline {
      text-decoration-line: underline;
      text-decoration-color: #e06c75;
      text-decoration-thickness: 4px;
      font-size: 24px;
      font-weight: bold;
    }

    .thin-underline {
      text-decoration-line: underline;
      text-decoration-color: #56b6c2;
      text-decoration-thickness: 1px;
      font-size: 24px;
      font-weight: bold;
    }
  </style>

  <p class="thick-underline">Testo con sottolineatura spessa</p>
  <p class="thin-underline">Testo con sottolineatura sottile</p>
  

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