text-underline-offset

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since November 2020.

* Some parts of this feature may have varying levels of support.

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.

Exemple interactif

Note : text-underline-offset n'est pas une propriété détaillée de text-decoration. Bien qu'un élément puisse avoir plusieurs lignes décoratives, text-underline-offset n'aura qu'un impact sur le soulignage (et pas sur les autres lignes telles que celles fournies par text-decoration-line avec overline ou line-through).

Syntaxe

css
/* 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

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

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

Exemples

CSS

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

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

Specification
CSS Text Decoration Module Level 4
# underline-offset

Compatibilité des navigateurs

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
text-underline-offset
auto
percentage values

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Voir aussi