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

text-underline-offset: auto;

text-underline-offset: 8px;

text-underline-offset: -0.5rem;

<section id="default-example">
  <p id="example-element">And after all we are only ordinary</p>
</section>

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

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

Voir aussi

text-decoration