text-underline-offset

La propriété CSS text-underline-offset définit le décalage de la ligne de décoration du texte par rapport à sa position originale.

Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner https://github.com/mdn/interactive-examples et à envoyer une pull request !

Syntaxe

/* Valeur simple */
text-underline-offset: none;
text-underline-offset: from-font;
text-underline-offset: 0.2em;

/* Valeurs globales */
text-underline-offset: inherit;
text-underline-offset: initial;
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.

from-font

Si le fichier de fonte inclut des informations quant à un décalage préféré, c'est cette valeur qui sera utilisée. Si le fichier de fonte n'a pas cette information, cette valeur se comportera comme auto.

<length>

Une longueur (valeur de type <length>) indiquant le décalage à utiliser. Il est recommandé d'utiliser des em comme unité afin que le décalage suive la taille de la police (quand on zoome par exemple).

Syntaxe formelle

auto | from-font | <length> | <percentage>

Exemples

CSS

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

.deuxlignes{
  text-decoration-line: underline overline;
}

HTML

<p class="uneligne">
  Voici un texte souligné avec une ligne ondulée rouge !
</p>
<p class="deuxlignes">
  Ce texte a une ligne en dessous et une ligne au dessus.
  Seule la ligne du dessous est déplacée.
</p>

Résultat

Spécifications

Compatibilité des navigateurs

Voir aussi

• text-decoration