Propriété CSS text-decoration-color

La propriété text-decoration-color permet de définir la couleur de la décoration de texte. Vous pouvez choisir des couleurs ici Couleurs HTML.

Ces couleurs s'appliquent aux décorations telles que les surlignages, les soulignements et les lignes ondulées.

La propriété text-decoration-color fait partie des propriétés CSS3.

Valeur initiale	currentColor
S'applique à	Tous les éléments. S'applique également à ::first-letter et ::first-line.
Héritée	Non.
Animable	Oui. La couleur est animable.
Version	CSS Text Decoration Module Level 3
Syntaxe DOM	object.style.textDecorationColor = "#ccc";

Syntaxe

Syntaxe CSS de text-decoration-color

css

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

INFO

Remarque : L'utilisation de la propriété raccourcie text-decoration réinitialise text-decoration-color à currentColor.

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

Exemple de code CSS pour text-decoration-color

html

<!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>

Try it Yourself »

Résultat

CSS text-decoration-color

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

Exemple de toutes les valeurs CSS pour text-decoration-color

html

<!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>

Try it Yourself »

Valeurs

Valeur	Description	Tester »
color	Définit la couleur de la décoration de texte. Les noms de couleurs, les codes hexadécimaux, rgb(), rgba(), hsl(), hsla() et currentColor peuvent être utilisés.	Tester »
initial	Définit la propriété à sa valeur par défaut.	Tester »
inherit	Hérite la propriété de son élément parent.

Pratique

Que permet de définir la propriété 'text-decoration-color' en CSS ?

Elle permet de définir la couleur du soulignement défini avec 'text-decoration'.Elle ajuste la taille de la police.Elle modifie le style du texte.Elle permet de définir la couleur du texte barré défini avec 'text-decoration'.Elle modifie la couleur de fond de la page.

Propriété CSS text-decoration-color ​

Syntaxe ​

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

Résultat ​

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

Valeurs ​