Guida CSS interattiva: Sottolineato

Q: Come si sottolinea il testo in CSS?

Usa text-decoration: underline; sull'elemento. Per l'aspetto della linea, aggiungi text-decoration-color, text-decoration-style, text-decoration-thickness e text-underline-offset.

Q: Come tolgo la sottolineatura da un link?

Imposta text-decoration: none; sull'elemento a. Assicurati che i link si distinguano comunque in un altro modo (colore più una sottolineatura in hover o con il focus), perché molti lettori si affidano alla sottolineatura per riconoscere i link.

Q: Come cambio il colore della sottolineatura?

Usa text-decoration-color, oppure la forma abbreviata: text-decoration: underline #f59e0b;. Senza, la linea usa il colore del testo.

Q: Come aggiungo spazio tra il testo e la sottolineatura?

Usa text-underline-offset, per esempio text-underline-offset: 4px;. Valori più grandi spostano la linea più in basso rispetto al testo.

Come sottolineare il testo in CSS

text-decoration: underline disegna una linea sotto il testo. La linea prende il colore del testo, a meno che tu non gliene dia uno.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Underline</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 22px; color: #111827; }
    .under { text-decoration: underline; }
    .styled {
      text-decoration: underline wavy #f59e0b;
      text-decoration-thickness: 2px;
      text-underline-offset: 5px;
    }
  </style>
</head>
<body>
  <p class="under">A plain underline</p>
  <p class="styled">A wavy amber underline, 2px thick, 5px below</p>
</body>
</html>

La seconda riga usa la forma abbreviata text-decoration per tipo, stile e colore della linea, poi imposta spessore e offset con le loro proprietà. La specifica permette anche di mettere lo spessore nella forma abbreviata, ma Safari scarta l'intera dichiarazione se lo includi, quindi scrivi text-decoration-thickness a parte.

Le proprietà text-decoration

Proprietà	Valori	Predefinito
`text-decoration-line`	`underline`, `overline`, `line-through`, `none` (combinabili)	`none`
`text-decoration-style`	`solid`, `double`, `dotted`, `dashed`, `wavy`	`solid`
`text-decoration-color`	Qualsiasi colore	`currentColor` (il colore del testo)
`text-decoration-thickness`	Una lunghezza, una percentuale, `auto`, `from-font`	`auto`
`text-underline-offset`	Una lunghezza, una percentuale, `auto`	`auto`

text-decoration è la forma abbreviata delle prime quattro, ma tieni fuori lo spessore: Safari ignora una dichiarazione text-decoration che lo contiene. text-underline-offset è separata e va scritta da sola.

Stili, colori e spessore

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Underline styles</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 20px; color: #111827; }
    p { margin: 10px 0; text-decoration-line: underline; }
    .solid { text-decoration-style: solid; }
    .double { text-decoration-style: double; }
    .dotted { text-decoration-style: dotted; }
    .dashed { text-decoration-style: dashed; }
    .wavy { text-decoration-style: wavy; text-decoration-color: #dc2626; }
    .thick { text-decoration-thickness: 4px; text-decoration-color: #2563eb; }
  </style>
</head>
<body>
  <p class="solid">solid</p>
  <p class="double">double</p>
  <p class="dotted">dotted</p>
  <p class="dashed">dashed</p>
  <p class="wavy">wavy and red, like a spelling error</p>
  <p class="thick">4px thick and blue</p>
</body>
</html>

Spostare la sottolineatura: text-underline-offset

Per impostazione predefinita la linea sta vicino alle lettere e gira intorno ai discendenti come g, p e y. text-underline-offset la spinge più in basso, e spesso su titoli e link si legge meglio:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Underline offset</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 24px; color: #111827; }
    p { text-decoration: underline #2563eb; text-decoration-thickness: 2px; margin: 12px 0; }
    .o2 { text-underline-offset: 2px; }
    .o6 { text-underline-offset: 6px; }
    .o10 { text-underline-offset: 10px; }
  </style>
</head>
<body>
  <p>Typography (auto)</p>
  <p class="o2">Typography (2px)</p>
  <p class="o6">Typography (6px)</p>
  <p class="o10">Typography (10px)</p>
</body>
</html>

Le interruzioni intorno ai discendenti vengono da text-decoration-skip-ink: auto, attivo per impostazione predefinita. Impostalo su none per una linea continua.

Togliere la sottolineatura dai link

I link sono sottolineati dal foglio di stile del browser. text-decoration: none la toglie. Siccome molti lettori trovano i link grazie alla sottolineatura, rimettila in hover e con il focus da tastiera, e dai al link un colore diverso da quello del testo:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Link underlines</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; color: #111827; }
    nav a {
      color: #2563eb;
      text-decoration: none;
      margin-inline-end: 16px;
    }
    nav a:hover,
    nav a:focus-visible {
      text-decoration: underline;
      text-underline-offset: 4px;
    }
  </style>
</head>
<body>
  <nav>
    <a href="#home" id="first">Home</a>
    <a href="#docs">Docs</a>
    <a href="#blog">Blog</a>
  </nav>
  <p>Links in a paragraph, like <a href="#more">this one</a>, keep their underline.</p>
</body>
</html>

Barre di navigazione e pulsanti sono un posto ragionevole per togliere la sottolineatura, perché la loro posizione dice già "link". Dentro un paragrafo di testo, mantienila. Trovi altro sugli stati dei link nella pagina sull'hover.

Linea sopra e testo barrato

text-decoration-line disegna anche una linea sopra il testo o attraverso di esso, e accetta più di un valore:

.old-price { text-decoration: line-through; }
.both      { text-decoration-line: underline overline; }

Il barrato fatto con il CSS è solo visivo. Quando il testo è contenuto eliminato (un prezzo cambiato, un articolo rimosso), marcalo con <s> o <del>, come mostra la pagina sul sottolineato in HTML, così il significato sta nel markup e non solo nello stile.

Errori comuni

Usare <u> per sottolineare per stile. <u> serve per il testo segnalato come diverso, come gli errori di ortografia. Per una sottolineatura decorativa, usa il CSS.
Sottolineare un testo che non è un link. I lettori proveranno a cliccarlo. Per dare enfasi usa invece grassetto, colore o uno sfondo.
Togliere la sottolineatura ai link nel testo senza un altro indizio. Il solo colore non basta per chi non vede la differenza.
Cercare di togliere dal figlio la sottolineatura del genitore. Non si può annullare dall'interno; cambia il genitore o rendi il figlio inline-block.
Aspettarsi text-underline-offset nella forma abbreviata. È una proprietà a sé.
Mettere lo spessore nella forma abbreviata. text-decoration: underline 2px funziona in Chrome e Firefox, ma Safari scarta l'intera dichiarazione. Usa text-decoration-thickness.

Domande frequenti

Come si sottolinea il testo in CSS?

Usa text-decoration: underline; sull'elemento. Per l'aspetto della linea, aggiungi text-decoration-color, text-decoration-style, text-decoration-thickness e text-underline-offset.

Come tolgo la sottolineatura da un link?

Imposta text-decoration: none; sull'elemento a. Assicurati che i link si distinguano comunque in un altro modo (colore più una sottolineatura in hover o con il focus), perché molti lettori si affidano alla sottolineatura per riconoscere i link.

Come cambio il colore della sottolineatura?

Usa text-decoration-color, oppure la forma abbreviata: text-decoration: underline #f59e0b;. Senza, la linea usa il colore del testo.

Come aggiungo spazio tra il testo e la sottolineatura?

Usa text-underline-offset, per esempio text-underline-offset: 4px;. Valori più grandi spostano la linea più in basso rispetto al testo.

Perché non riesco a togliere la sottolineatura da un elemento figlio?

Una sottolineatura disegnata da un genitore attraversa anche i suoi figli e non si può togliere dall'interno. Rimuovila sull'elemento che la imposta, oppure rendi il figlio display: inline-block, che la decorazione del genitore non raggiunge.

Concetti correlati