text-underline-offset

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 novembre 2020.

* Certaines parties de cette fonctionnalité peuvent bénéficier de prise en charge variables.

La propriété CSS text-underline-offset définit la distance de décalage d'une ligne de décoration de texte soulignée (appliquée à l'aide de text-decoration) par rapport à sa position originale.

Exemple interactif

text-underline-offset: auto;

text-underline-offset: 8px;

text-underline-offset: -0.5rem;

<section id="default-example">
  <p id="example-element">Et après tout, nous ne sommes que des ordinaires</p>
</section>

p {
  font: 1.5em sans-serif;
  text-decoration-line: underline;
  text-decoration-color: red;
}

text-underline-offset ne fait pas partie de la propriété raccourcie text-decoration. Lorsqu'un élément peut avoir plusieurs lignes de text-decoration, text-underline-offset n'affecte que le soulignement, et pas les autres options de décoration de ligne possibles telles que overline ou line-through.

Syntaxe

css

/* Valeurs avec un mot-clé */
text-underline-offset: auto;

/* Valeurs de type <length> */
text-underline-offset: 0.1em;
text-underline-offset: 3px;

/* Valeurs de type <percentage> */
text-underline-offset: 20%;

/* Valeurs globales */
text-underline-offset: inherit;
text-underline-offset: initial;
text-underline-offset: revert;
text-underline-offset: revert-layer;
text-underline-offset: unset;

La propriété text-underline-offset est définie avec le mot-clé none ou avec une valeur de la liste suivante.

Valeurs

auto: Le navigateur choisit un décalage approprié pour le soulignage.
<length>: Définit le décalage des soulignements en tant que longueur (<length>), remplaçant la suggestion du fichier de police et la valeur par défaut du navigateur. Il est recommandé d'utiliser des unités em afin que le décalage s'adapte à la taille de la police.
<percentage>: Définit le décalage des soulignements en tant que pourcentage (<percentage>) de 1em dans la police de l'élément. Un pourcentage hérite en tant que valeur relative, et donc s'adapte aux changements de la police. Pour une application donnée de cette propriété, le décalage est constant sur toute la boîte à laquelle le soulignement est appliqué, même s'il y a des éléments enfants avec des tailles de police ou un alignement vertical différents.

Définition formelle

Valeur initiale	`auto`
Applicabilité	tous les éléments. S'applique aussi à `::first-letter` et `::first-line`.
Héritée	oui
Pourcentages	se rapporte à la taille de la police de l'élément lui-même
Valeur calculée	comme défini
Type d'animation	par type de valeur calculée

Syntaxe formelle

text-underline-offset = 
  auto                 |
  <length-percentage>  

<length-percentage> = 
  <length>      |
  <percentage>

Exemples

Démonstration de `text-underline-offset`

html

<p class="ligne-une">
  Voici un texte souligné avec une ligne ondulée rouge&nbsp;!
</p>
<br />
<p class="ligne-deux">
  Ce texte a des lignes à la fois au-dessus et en dessous. Seule la ligne du bas
  est décalée.
</p>

css

p {
  text-decoration: underline wavy red;
  text-underline-offset: 1em;
}

.ligne-deux {
  text-decoration-color: purple;
  text-decoration-line: underline overline;
}

Spécifications

Spécification
CSS Text Decoration Module Level 4 # underline-offset

Compatibilité des navigateurs

Voir aussi

La propriété text-decoration
La propriété text-decoration-thickness

Aider à améliorer MDN

Apprendre à contribuer

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

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