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.

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

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

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

Spécification État Commentaires
underline-offset" hreflang="en" lang="en" class="external">CSS Text Decoration Module Level 4
La définition de 'text-underline-offset' dans cette spécification.
Version de travail Définition initiale.
Valeur initialeauto
Applicabilitétous les éléments. S'applique aussi à ::first-letter et ::first-line.
Héritéeoui
Médiavisuel
Valeur calculéecomme spécifié
Type d'animationby computed value type
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
text-underline-offsetChrome Aucun support NonEdge Aucun support NonFirefox Support complet 70
Support complet 70
Support complet 69
Désactivée
Désactivée From version 69: this feature is behind the layout.css.text-underline-offset.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Aucun support NonOpera Aucun support NonSafari Support complet 12.1WebView Android Aucun support NonChrome Android Aucun support NonFirefox Android Aucun support NonOpera Android Aucun support NonSafari iOS Support complet 12.2Samsung Internet Android Aucun support Non

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.

Voir aussi