W3docs
fr
Se connecter

Propriété CSS text-decoration-color

Utilisez la propriété CSS text-decoration-color pour définir la couleur de la décoration de texte. Valeurs et exemples interactifs.

La propriété CSS text-decoration-color définit la couleur des lignes qui décorent le texte — soulignements, surlignements et barrés (line-through). Par défaut, une ligne de décoration prend la même couleur que le texte lui-même ; cette propriété est donc celle que l'on utilise lorsque l'on souhaite que la ligne se distingue par une couleur différente de celle des mots.

Cette page couvre la syntaxe, les valeurs acceptées, l'interaction avec le raccourci text-decoration, et des exemples exécutables.

Pourquoi une propriété de couleur distincte ?

Sans text-decoration-color, un soulignement a toujours la même couleur que le texte. C'est généralement suffisant, mais les designers souhaitent souvent une ligne plus subtile ou plus vive — un soulignement gris sous un texte noir, un barré rouge sur un prix affiché, ou un soulignement coloré indiquant l'état d'un lien. Séparer la couleur dans sa propre propriété longue rend ces effets possibles tout en préservant la couleur du texte.

C'est l'une des trois propriétés longues qui composent le raccourci text-decoration, aux côtés de text-decoration-line (le type de ligne : underline, overline, line-through) et de text-decoration-style (solid, wavy, dotted, dashed, double). Seule, text-decoration-color n'a aucun effet visible tant qu'une ligne de décoration n'est pas également présente.

Cette propriété fait partie des propriétés CSS3. Toute valeur de couleur CSS valide est acceptée — consultez la liste complète dans les couleurs HTML.

Valeur initialecurrentColor
S'applique àTous les éléments. S'applique également à ::first-letter et ::first-line.
HéritageNon.
AnimatableOui. La couleur est animatable.
VersionCSS Text Decoration Module Level 3
Syntaxe DOMobject.style.textDecorationColor = "#ccc";

Syntaxe

Syntaxe CSS de text-decoration-color

text-decoration-color: color | initial | inherit;

Où color est n'importe quelle valeur de couleur CSS. La valeur par défaut est currentColor, ce qui signifie que la ligne de décoration correspond à la couleur du texte de l'élément.

Info

Remarque : l'utilisation du raccourci text-decoration réinitialise text-decoration-color à sa valeur initiale (currentColor) sauf si vous incluez une couleur dans le raccourci. Donc, si vous définissez la couleur séparément, déclarez-la après tout raccourci text-decoration, ou incluez la couleur directement dans le raccourci.

Exemple de la propriété text-decoration-color :

Exemple de code 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>
Essayez vous-même »

Résultat

CSS text-decoration-color

Exemple de la propriété text-decoration-color avec les valeurs "underline" et "line-through" :

Exemple CSS text-decoration-color avec toutes les valeurs

<!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>
Essayez vous-même »

Utiliser currentColor

La valeur initiale currentColor maintient la ligne de décoration synchronisée avec la couleur du texte. C'est pratique lorsque la couleur du texte change au survol (:hover) ou selon les thèmes — le soulignement suit automatiquement sans nécessiter une règle supplémentaire :

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 */
}

Points d'attention

  • Sans ligne, pas de couleur. text-decoration-color ne s'affiche que lorsqu'une ligne de décoration existe. Associez-la à text-decoration-line (ou au raccourci text-decoration) — sinon rien n'apparaît.
  • L'ordre dans le raccourci est important. Un raccourci text-decoration déclaré ensuite réinitialise la couleur à currentColor. Définissez la couleur en dernier, ou incluez-la dans le raccourci : text-decoration: underline #8ebf42;.
  • Elle n'est pas héritée. Chaque élément calcule sa propre valeur, mais comme la valeur par défaut est currentColor, un élément enfant tend à correspondre à sa propre couleur de texte héritée.
  • Elle est animatable. Puisque les transitions de couleur sont fluides, vous pouvez animer la couleur du soulignement au survol avec une transition.

Pour contrôler l'épaisseur de la ligne, consultez text-decoration-style et le raccourci complet text-decoration.

Valeurs

ValeurDescriptionEssayer
colorDéfinit la couleur de la décoration de texte. Les noms de couleurs, codes hexadécimaux, rgb(), rgba(), hsl(), hsla() et currentColor peuvent être utilisés.Essayer »
initialAttribue la valeur par défaut à la propriété.Essayer »
inheritHérite la propriété de son élément parent.

Pratique

Pratique
Que peut-on définir avec la propriété 'text-decoration-color' en CSS ?
Que peut-on définir avec la propriété 'text-decoration-color' en CSS ?
Was this page helpful?