Proprietà CSS text-decoration-color
Usa la proprietà CSS text-decoration-color per specificare il colore della decorazione del testo. Scopri i valori e prova gli esempi.
La proprietà CSS text-decoration-color imposta il colore delle linee che decorano il testo — sottolineature, sopralineature e linee di barramento (line-through). Per impostazione predefinita, una linea decorativa assume lo stesso colore del testo, quindi questa proprietà è ciò a cui si ricorre quando si vuole che la linea risalti con un colore diverso rispetto alle parole.
Questa pagina tratta la sintassi, i valori accettati, l'interazione con la shorthand text-decoration e gli esempi eseguibili.
Perché una proprietà colore separata?
Senza text-decoration-color, una sottolineatura ha sempre lo stesso colore del testo. Questo va bene nella maggior parte dei casi, ma i designer spesso desiderano una linea più sottile o più vivace — una sottolineatura grigia su testo nero, un barramento rosso su un prezzo quotato, o una sottolineatura colorata che segnala lo stato di un link. Separare il colore nella sua proprietà longhand rende possibili questi effetti mantenendo intatto il colore del testo.
È una delle tre proprietà longhand che compongono la shorthand text-decoration, insieme a text-decoration-line (quale linea: underline, overline, line-through) e text-decoration-style (solid, wavy, dotted, dashed, double). Da sola, text-decoration-color non ha alcun effetto visibile a meno che non sia presente anche una linea decorativa.
La proprietà fa parte delle proprietà CSS3. Qualsiasi colore CSS valido funziona — vedi l'elenco completo in colori HTML.
| Valore iniziale | currentColor |
|---|---|
| Si applica a | Tutti gli elementi. Si applica anche a ::first-letter e ::first-line. |
| Ereditato | No. |
| Animabile | Sì. Il colore è animabile. |
| Versione | CSS Text Decoration Module Level 3 |
| Sintassi DOM | object.style.textDecorationColor = "#ccc"; |
Sintassi
Sintassi CSS di text-decoration-color
text-decoration-color: color | initial | inherit;Dove color è qualsiasi valore di colore CSS. Il valore predefinito è currentColor, che fa sì che la linea decorativa corrisponda al colore del testo dell'elemento.
Nota: L'uso della shorthand text-decoration reimposta text-decoration-color al suo valore iniziale (currentColor) a meno che non si includa un colore nella shorthand. Quindi se si imposta il colore separatamente, dichiararlo dopo qualsiasi shorthand text-decoration, oppure includere il colore all'interno della shorthand stessa.
Esempio della proprietà text-decoration-color:
Esempio di codice CSS text-decoration-color
<!DOCTYPE html>
<html>
<head>
<title>Title of the text</title>
<style>
p {
text-decoration: overline underline;
text-decoration-color: #8ebf42;
}
</style>
</head>
<body>
<h2>Text-decoration-color property example</h2>
<p>Lorem ipsum is simply dummy text...</p>
</body>
</html>Risultato
Esempio della proprietà text-decoration-color con i valori "underline" e "line-through":
Esempio CSS text-decoration-color con tutti i valori
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
text-decoration-line: underline;
text-decoration-color: #666666;
text-decoration-style: wavy;
}
s {
text-decoration-line: line-through;
text-decoration-color: #c91010;
}
</style>
</head>
<body>
<h2>Text-decoration-color property example</h2>
<p>Lorem ipsum is <s>simply dummy</s> text...</p>
</body>
</html>Utilizzo di currentColor
Il valore iniziale currentColor mantiene la linea decorativa sincronizzata con il colore del testo. Questo è utile quando il colore del testo cambia su :hover o in temi diversi — la sottolineatura segue automaticamente senza una seconda regola:
a {
color: #8ebf42;
text-decoration-line: underline;
text-decoration-color: currentColor; /* line matches the link color */
}
a:hover {
color: #c91010; /* both text and underline turn red */
}Aspetti da tenere a mente
- Nessuna linea, nessun colore.
text-decoration-colorsi mostra solo quando è presente una linea decorativa. Abbinala atext-decoration-line(o alla shorthandtext-decoration) — altrimenti non appare nulla. - L'ordine della shorthand è importante. Una shorthand
text-decorationsuccessiva reimposterà il colore acurrentColor. Imposta il colore per ultimo, oppure scrivi il colore all'interno della shorthand:text-decoration: underline #8ebf42;. - Non viene ereditata. Ogni elemento calcola il proprio valore, ma poiché il valore predefinito è
currentColor, un elemento figlio tende comunque a corrispondere al proprio colore di testo ereditato. - È animabile. Poiché le transizioni di colore sono fluide, è possibile animare il colore della sottolineatura al passaggio del mouse con una
transition.
Per il controllo dello spessore della linea, vedi text-decoration-style e la shorthand completa text-decoration.
Valori
| Valore | Descrizione | Provalo |
|---|---|---|
| color | Definisce il colore della decorazione del testo. Si possono usare nomi di colore, codici esadecimali, rgb(), rgba(), hsl(), hsla() e currentColor. | Provalo » |
| initial | Imposta la proprietà al suo valore predefinito. | Provalo » |
| inherit | Eredita la proprietà dall'elemento genitore. |