text-emphasis-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 mars 2022.
La propriété CSS text-emphasis-color définit la couleur utilisée pour dessiner les marques d'emphase. Celle-ci peut être définie grâce à la propriété raccourcie text-emphasis.
Exemple interactif
text-emphasis-color: currentColor;
text-emphasis-color: red;
text-emphasis-color: rgb(90 200 160 / 0.8);
<section id="default-example">
<p>
Je préfère être
<span class="transition-all" id="example-element"
>heureux que d'avoir raison</span
>
n'importe quel jour.
</p>
</section>
p {
font: 1.5em sans-serif;
}
#example-element {
text-emphasis: filled;
}
Syntaxe
css
/* Valeur initiale */
text-emphasis-color: currentColor;
/* Valeur de type <color> */
text-emphasis-color: #555555;
text-emphasis-color: blue;
text-emphasis-color: rgb(90 200 160 / 80%);
text-emphasis-color: transparent;
/* Valeurs globales */
text-emphasis-color: inherit;
text-emphasis-color: initial;
text-emphasis-color: revert;
text-emphasis-color: revert-layer;
text-emphasis-color: unset;
Valeurs
<color>-
Définit la couleur des marques d'emphase. Si aucune couleur n'est définie, la valeur par défaut sera
currentColor.
Définition formelle
| Valeur initiale | currentcolor |
|---|---|
| Applicabilité | tous les éléments |
| Héritée | oui |
| Valeur calculée | couleur calculée |
| Type d'animation | une couleur |
Syntaxe formelle
text-emphasis-color =
<color>
Exemples
Emphase avec une couleur et un caractère personnalisé
CSS
css
em {
text-emphasis-color: green;
text-emphasis-style: "*";
}
HTML
html
<p>Voici un exemple :</p>
<em>Voici des marques d'emphase !</em>
Résultat
Spécifications
| Spécification |
|---|
| CSS Text Decoration Module Level 3 # text-emphasis-color-property |
Compatibilité des navigateurs
Voir aussi
- Le type de donnée
<color> - Les autres propriétés liées aux marques d'emphase :
text-emphasis-style,text-emphasisettext-emphasis-position. - D'autres propriétés relatives aux couleurs :
color,background-color,border-color,outline-color,text-shadow,caret-coloretcolumn-rule-color