text-decoration-color

La propriété text-decoration-color définit la couleur utilisée pour dessiner les lignes décorant le texte (quel que soit le style définit text-decoration-line).

La propriété raccourcie text-decoration permet de paramétrer cette propriété et d'autres propriétés associées aux décorations.

Note : Lorsqu'on définit plusieurs décorations à la fois, il peut être plus pratique d'utiliser la propriété raccourcie text-decoration.

Il est préférable d'utiliser cette propriété pour colorer ces décorations plutôt que d'utiliser d'autres éléments HTML.

Note : CSS ne fournit pas de mécanisme spécifique pour définir une couleur par type de ligne. On peut toutefois y parvenir en imbriquant des éléments mis en forme différemment.

Syntaxe

/* Couleurs */
/* Valeurs de type <color> */
text-decoration-color: currentColor;
text-decoration-color: red;
text-decoration-color: #00ff00;
text-decoration-color: rgba(255, 128, 128, 0.5);
text-decoration-color: transparent;

/* Valeurs globales */
text-decoration-color: inherit;
text-decoration-color: initial;
text-decoration-color: unset;

Valeurs

<color>: La propriété color accepte différents mots-clés et valeurs numériques. Pour plus de détails, voir <color>.

Syntaxe formelle

<color>où 
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
où 
<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )
où 
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>

Exemples

HTML

<p class="exemple">Du texte avec un effet au survol</p>

CSS

.exemple {
  text-decoration: underline;
  text-decoration-color: red;
}

.exemple:hover {
  color: blue;
  text-decoration: line-through;
}

Résultat

Spécifications

Spécification	Statut	Commentaires
CSS Text Decoration Module Level 3 La définition de 'text-decoration-color' dans cette spécification.	Candidat au statut de recommandation	Définition initiale. La propriété `text-decoration` n'était pas une propriété raccourcie auparavant.

Valeur initiale	`currentcolor`
Applicabilité	tous les éléments. S'applique aussi à `::first-letter` et `::first-line`.
Héritée	non
Valeur calculée	couleur calculée
Type d'animation	une couleur

Compatibilité des navigateurs

Update compatibility data on GitHub

	Ordinateur						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Webview Android	Chrome pour Android	Firefox pour Android	Opera pour Android	Safari sur iOS	Samsung Internet
`text-decoration-color`	Chrome Support complet 57	Edge Support complet 79	Firefox Support complet 36 Support complet 36 Aucun support 6 — 39 Préfixée Préfixée Nécessite l'utilisation d'un préfixe : -moz-	IE Aucun support Non	Opera Support complet 44	Safari Support complet 12.1 Support complet 12.1 Support complet 8 Préfixée Préfixée Nécessite l'utilisation d'un préfixe : -webkit-	WebView Android Support complet 57	Chrome Android Support complet 57	Firefox Android Support complet 36 Support complet 36 Aucun support 6 — 39 Préfixée Préfixée Nécessite l'utilisation d'un préfixe : -moz-	Opera Android Support complet 43	Safari iOS Support complet 12.2 Support complet 12.2 Support complet 8 Préfixée Préfixée Nécessite l'utilisation d'un préfixe : -webkit-	Samsung Internet Android Support complet 7.0

Légende

Support complet: Support complet
Aucun support: Aucun support
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.: Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.

Voir aussi

La propriété raccourcie text-decoration qui permet, entre autres, de paramétrer text-decoration-color.
Le type de données <color>
D'autres propriétés relatives aux couleurs : background-color, border-color, outline-color, text-decoration-color, text-emphasis-color, text-shadow, caret-color et column-rule-color
Appliquer des couleurs aux éléments HTML