Propriété CSS text-decoration-color

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

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.

Support de Navigateurs

57.0+ 36.0+ 12.1+ 44.0+


Trouvez-vous cela utile?

Articles Associées