Proprietà CSS text-decoration-line
Usa la proprietà CSS text-decoration-line per specificare il tipo di linea per la decorazione del testo. Valori ed esempi pratici.
La proprietà text-decoration-line imposta il tipo di linea utilizzata per la decorazione del testo — underline, overline, line-through, oppure qualsiasi combinazione di queste.
È una delle quattro proprietà longhand che compongono la proprietà shorthand text-decoration, insieme a text-decoration-color, text-decoration-style e text-decoration-thickness. Usa text-decoration-line da sola quando hai bisogno di modificare solo quali linee vengono mostrate, lasciando invariati il colore, lo stile e lo spessore.
Questa pagina illustra i valori accettati dalla proprietà, come combinare più linee contemporaneamente, il rapporto con la proprietà shorthand e alcune avvertenze pratiche.
La proprietà text-decoration-line è pienamente supportata da tutti i browser moderni senza prefissi vendor. È una delle proprietà CSS3.
Perché usare text-decoration-line
Un motivo comune per ricorrere alla longhand è aggiungere o rimuovere una singola linea senza alterare il resto della decorazione. Ad esempio, i link sono sottolineati per impostazione predefinita; impostando text-decoration-line: none si rimuove la sottolineatura, permettendo comunque di aggiungere successivamente un colore personalizzato tramite la proprietà shorthand. La proprietà accetta anche più parole chiave, quindi è possibile applicare una sottolineatura e una sopralinea allo stesso testo in una sola dichiarazione.
| Valore iniziale | none |
|---|---|
| Si applica a | Tutti gli elementi. Si applica anche a ::first-letter e ::first-line. |
| Ereditato | No. |
| Animabile | No. |
| Versione | CSS3 |
| Sintassi DOM | object.style.textDecorationLine = "overline underline"; |
Sintassi
Sintassi CSS di text-decoration-line
text-decoration-line: none | [ underline || overline || line-through ] | initial | inherit;La parola chiave none è utilizzata da sola, mentre underline, overline e line-through possono essere combinate in una singola dichiarazione, separate da spazi, e l'ordine non ha importanza:
/* a single line */
text-decoration-line: underline;
/* two lines at once */
text-decoration-line: underline overline;
/* all three */
text-decoration-line: underline overline line-through;Esempio della proprietà text-decoration-line:
Esempio di codice CSS text-decoration-line
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
text-decoration-line: overline;
}
</style>
</head>
<body>
<h2>Text-decoration-line property example</h2>
<p>Lorem Ipsum is simply dummy text...</p>
</body>
</html>Risultato
Esempio della proprietà text-decoration-line con il valore "underline":
Esempio CSS text-decoration-line con valore underline
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
text-decoration-line: underline;
}
</style>
</head>
<body>
<h2>Text-decoration-line property example</h2>
<p>Lorem Ipsum is simply dummy text...</p>
</body>
</html>Esempio della proprietà text-decoration-line con il valore "line-through":
Esempio CSS text-decoration-line con valore line-through
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
text-decoration-line: line-through;
}
</style>
</head>
<body>
<h2>Text-decoration-line property example</h2>
<p>Lorem Ipsum is simply dummy text...</p>
</body>
</html>Esempio della proprietà text-decoration-line con tutti i valori:
Esempio CSS text-decoration-line con tutti i valori
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
margin: 20px 0;
}
div.t1 {
text-decoration-line: none;
}
div.t2 {
text-decoration-line: underline;
}
div.t3 {
text-decoration-line: line-through;
}
div.t4 {
text-decoration-line: overline;
}
</style>
</head>
<body>
<h2>Text-decoration-line property example</h2>
<div class="t1">
Lorem Ipsum is simply dummy text...
</div>
<div class="t2">
Lorem Ipsum is simply dummy text...
</div>
<div class="t3">
Lorem Ipsum is simply dummy text...
</div>
<div class="t4">
Lorem Ipsum is simply dummy text...
</div>
</body>
</html>Combinare text-decoration-line con la shorthand
Poiché text-decoration-line controlla solo le linee, di solito viene abbinata alle altre proprietà longhand — oppure si utilizza direttamente la proprietà shorthand text-decoration, che le imposta tutte insieme. Queste due regole producono lo stesso risultato:
/* longhands */
p {
text-decoration-line: underline;
text-decoration-color: red;
text-decoration-style: wavy;
}
/* shorthand equivalent */
p {
text-decoration: underline red wavy;
}Ricorrere alla longhand è conveniente quando si vuole sovrascrivere un solo aspetto senza riscrivere l'intera decorazione — ad esempio, cambiando solo il tipo di linea su :hover mantenendo colore e stile ereditati.
Nota sull'accessibilità
text-decoration-line: line-through è puramente visivo: le tecnologie assistive non annunciano che il testo è barrato. Per comunicare agli utenti di screen reader che un contenuto è stato rimosso o cancellato, è preferibile usare gli elementi semantici <del> o <s> invece di affidarsi solo al CSS.
Valori
| Valore | Descrizione | Provalo |
|---|---|---|
| none | Nessuna linea specificata. | Provalo » |
| underline | Specifica una linea sotto il testo. | Provalo » |
| overline | Specifica una linea sopra il testo. | Provalo » |
| line-through | Specifica una linea attraverso il testo. | Provalo » |
| initial | Imposta la proprietà al suo valore predefinito. | Provalo » |
| inherit | Eredita la proprietà dall'elemento genitore. |
La proprietà text-decoration-line supportava in precedenza un valore blink che faceva lampeggiare il testo. Questo valore è ora deprecato e la maggior parte dei browser lo ignora, quindi non usarlo nel codice nuovo.
Proprietà correlate
- text-decoration — la proprietà shorthand che imposta linea, colore, stile e spessore insieme.
- text-decoration-color — imposta il colore della linea di decorazione.
- text-decoration-style — imposta la linea come
solid,double,dotted,dashedowavy.