Propriété CSS text-decoration-color

❮ Précédent Suivant ❯

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

Valeur initiale	currentColor
Appliquée à	Tous les éléments. Elle est aussi appliquée aux éléments pseudos ::first-letter et ::first-line.
Héritée	Non.
Animable	Oui. La couleur est animable.
Version	CSS1, CSS3
Syntaxe DOM	object.style.textDecorationColor = "#ccc";

Syntaxe

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

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du texte</title>
    <style>
      p {
      text-decoration: overline underline;
      -webkit-text-decoration-color: #8ebf42; /* Safari */  
      text-decoration-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété text-decoration-color</h2>
    <p>Le Lorem Ipsum est simplement du faux texte...</p>
  </body>
</html>

Essayez-vous-même!

Dans l'exemple donné, l'extension -webkit- pour Safari est utilisée.

Un autre exemple avec la propriété text-decoration-color :

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      p { 
      text-decoration-line: underline;
      text-decoration-color: #666;
      text-decoration-style: wavy;
      }
      s {
      text-decoration-line: line-through;
      text-decoration-color: #c91010;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété text-decoration-color </h2>
    <p>Lorem ipsum est <s> simplement du faux </s> texte...</p>
  </body>
</html>

Essayez-vous-même!

Valeurs

Valeur	Description
color	Définit la couleur de la décoration de texte. Les noms des couleurs, codes hexadecimaux des couleurs, rgb(), rgba(), hsl(), hsla() peuvent être utilisés.
initial	Fait utiliser la valeur initiale.
inherit	Hérite la propriété de son élément parent.