text-emphasis-style

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-style définit le type d'emphase utilisée. Celui-ci peut également être défini par la propriété raccourcie text-emphasis.

Exemple interactif

text-emphasis-style: none;

text-emphasis-style: triangle;

text-emphasis-style: "x";

text-emphasis-style: filled double-circle;

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

Syntaxe

css

/* Valeur initiale */
text-emphasis-style: none; /* Aucune marque d'emphase */

/* Valeurs de type <string> */
text-emphasis-style: "x";
text-emphasis-style: "\25B2";
text-emphasis-style: "*";

/* Valeurs avec un mot-clé */
text-emphasis-style: filled;
text-emphasis-style: open;
text-emphasis-style: dot;
text-emphasis-style: circle;
text-emphasis-style: double-circle;
text-emphasis-style: triangle;
text-emphasis-style: filled sesame;
text-emphasis-style: open sesame;

/* Valeurs globales */
text-emphasis-style: inherit;
text-emphasis-style: initial;
text-emphasis-style: revert;
text-emphasis-style: revert-layer;
text-emphasis-style: unset;

Valeurs

none: Aucune marque d'emphase.
filled: La forme est remplie avec une couleur unie. Si filled ou open est absent, ce sera la valeur par défaut.
open: La forme est vide.
dot: Cette valeur permet d'afficher des marques en forme de points. Le point rempli est le caractère '•' (U+2022) et le point vide est le caractère '◦' (U+25E6).
circle: Cette valeur permet d'afficher des marques en forme de cercles (plus grands que les points). Le cercle rempli est le caractère '●' (U+25CF) et celui pour le cercle ouvert est '○' (U+25CB).
double-circle: Cette valeur permet d'afficher des marques en forme de doubles cercles. Le double-cercle rempli est le caractère '◉' (U+25C9), et le double-cercle ouvert est le caractère '◎' (U+25CE).
triangle: Cette valeur permet d'afficher des marques en forme de triangles. Le triangle rempli correspond au caractère '▲' (U+25B2) et le triangle ouvert au caractère '△' (U+25B3).
sesame: Cette valeur permet d'afficher des marques en forme de points sésame :'﹅' (U+FE45) pour le caractère rempli et '﹆' (U+FE46) pour le caractère ouvert.
<string>: Affiche la chaîne de caractères donnée comme marques. Les auteur·ice·s ne doivent pas définir plus d'un caractère dans <string>. L'agent utilisateur peut tronquer ou ignorer les chaînes de caractères composées de plus d'un groupe de graphèmes.

Définition formelle

Valeur initiale	`none`
Applicabilité	tous les éléments
Héritée	oui
Valeur calculée	comme défini
Type d'animation	discrète

Syntaxe formelle

text-emphasis-style = 
  none                                                |
  [ [ filled | open ] || [ dot | circle | double-circle | triangle | sesame ] ]  |
  <string>

Exemples

Exemple simple

css

h2 {
  -webkit-text-emphasis-style: sesame;
  text-emphasis-style: sesame;
}

Spécifications

Spécification
CSS Text Decoration Module Level 3 # text-emphasis-style-property

Compatibilité des navigateurs

Voir aussi

Les propriétés associées text-emphasis-color, text-emphasis.
La propriété text-emphasis-position permet de définir la position des marques d'emphase.

Aider à améliorer MDN

Apprendre à contribuer

Cette page a été modifiée le 2 avr. 2026 par les contributeur·ice·s du MDN.

Voir cette page sur GitHub • Signaler un problème avec ce contenu