text-decoration-color
Baseline
Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis janvier 2020.
La propriété text-decoration-color définit la couleur utilisée pour dessiner les lignes décorant le texte (quel que soit le style définit text-decoration-line).
La propriété raccourcie text-decoration permet de paramétrer cette propriété et d'autres propriétés associées aux décorations.
Exemple interactif
text-decoration-color: red;
text-decoration-color: #21ff21;
text-decoration-color: rgb(255, 90, 255);
text-decoration-color: hsl(70, 100%, 40%);
text-decoration-color: currentColor;
<section id="default-example">
<p>
I'd far rather be
<span class="transition-all" id="example-element">happy than right</span>
any day.
</p>
</section>
p {
font: 1.5em sans-serif;
}
#example-element {
text-decoration-line: underline;
}
Note :
Lorsqu'on définit plusieurs décorations à la fois, il peut être plus pratique d'utiliser la propriété raccourcie text-decoration.
Il est préférable d'utiliser cette propriété pour colorer ces décorations plutôt que d'utiliser d'autres éléments HTML.
Note : CSS ne fournit pas de mécanisme spécifique pour définir une couleur par type de ligne. On peut toutefois y parvenir en imbriquant des éléments mis en forme différemment.
Syntaxe
/* Couleurs */
/* Valeurs de type <color> */
text-decoration-color: currentColor;
text-decoration-color: red;
text-decoration-color: #00ff00;
text-decoration-color: rgba(255, 128, 128, 0.5);
text-decoration-color: transparent;
/* Valeurs globales */
text-decoration-color: inherit;
text-decoration-color: initial;
text-decoration-color: unset;
Valeurs
Définition formelle
| Valeur initiale | currentcolor |
|---|---|
| Applicabilité | tous les éléments. S'applique aussi à ::first-letter et ::first-line. |
| Héritée | non |
| Valeur calculée | couleur calculée |
| Type d'animation | une couleur |
Syntaxe formelle
text-decoration-color =
<color>
Exemples
HTML
<p class="exemple">Du texte avec un effet au survol</p>
CSS
.exemple {
text-decoration: underline;
text-decoration-color: red;
}
.exemple:hover {
color: blue;
text-decoration: line-through;
}
Résultat
Spécifications
| Specification |
|---|
| CSS Text Decoration Module Level 3 # text-decoration-color-property |
Compatibilité des navigateurs
Voir aussi
- La propriété raccourcie
text-decorationqui permet, entre autres, de paramétrertext-decoration-color. - Le type de données
<color> - D'autres propriétés relatives aux couleurs :
background-color,border-color,outline-color,text-decoration-color,text-emphasis-color,text-shadow,caret-coloretcolumn-rule-color - Appliquer des couleurs aux éléments HTML