text-decoration-color
Baseline
Large disponibilité
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é CSS text-decoration-color définit la couleur des décorations ajoutées au texte par text-decoration-line.
La couleur s'applique aux décorations, telles que les soulignements, les lignes au-dessus, les lignes barrées et les lignes ondulées utilisées pour marquer les fautes d'orthographe, dans le cadre de la valeur de la propriété.
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>
Je préférerais de loin être
<span class="transition-all" id="example-element"
>heureux que d'avoir raison</span
>
chaque jour.
</p>
</section>
p {
font: 1.5em sans-serif;
}
#example-element {
text-decoration-line: underline;
}
CSS ne fournit pas de mécanisme spécifique pour définir une couleur unique pour chaque type de ligne. Cet effet peut néanmoins être obtenu en imbriquant des éléments, en appliquant un type de ligne différent à chaque élément (avec la propriété text-decoration-line), et en définissant la couleur de la ligne (avec text-decoration-color) pour chaque élément.
Syntaxe
/* Valeurs de type <color> */
text-decoration-color: currentColor;
text-decoration-color: red;
text-decoration-color: #00ff00;
text-decoration-color: rgb(255 128 128 / 50%);
text-decoration-color: transparent;
/* Valeurs globales */
text-decoration-color: inherit;
text-decoration-color: initial;
text-decoration-color: revert;
text-decoration-color: revert-layer;
text-decoration-color: unset;
Valeurs
<color>-
La couleur de la décoration de ligne.
Accessibilité
Il est important de s'assurer que le ratio de contraste entre la couleur du texte, le fond sur lequel le texte est placé et la ligne de décoration du texte est suffisamment élevé pour que les personnes ayant des déficiences visuelles puissent lire le contenu de la page. Le ratio de contraste des couleurs est déterminé en comparant la luminosité des valeurs de couleur du texte et du fond.
La couleur seule ne doit pas être utilisée pour transmettre une signification. Par exemple, le changement de couleur du texte et de text-decoration-color seul ne suffit pas à indiquer qu'un lien a la sélection.
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
Exemple simple
<p>
Ce paragraphe contient <s>du texte erroné</s> à l'intérieur que je veux mettre
en évidence.
</p>
p {
text-decoration-line: underline;
text-decoration-color: cyan;
}
s {
text-decoration-line: line-through;
text-decoration-color: red;
text-decoration-style: wavy;
}
Spécifications
| Spécification |
|---|
| CSS Text Decoration Module Level 3 # text-decoration-color-property |
Compatibilité des navigateurs
Voir aussi
- Lors de la définition de plusieurs propriétés de décoration de ligne en même temps, il peut être plus pratique d'utiliser la propriété raccourcie
text-decoration. - Le type de donnée
<color> - Autres propriétés liées à la couleur :
background-color,border-color,outline-color,text-emphasis-color,text-shadow,caret-coloretcolumn-rule-color