Propriété CSS text-decoration-color
Use the text-decoration-color CSS property to specify the color of the text decoration. See property values and try examples.
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
text-decoration-color: color | initial | inherit;info
Remarque : L'utilisation de la propriété raccourcie
text-decorationréinitialisetext-decoration-coloràcurrentColor.
Exemple de la propriété text-decoration-color :
Exemple de code CSS pour 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>Résultat
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
<!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>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 ?