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 !
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 desem
comme unité afin que le décalage suive la taille de la police (quand on zoome par exemple).
Syntaxe formelle
auto | <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
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 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 spécifié |
Type d'animation | by computed value type |
Compatibilité des navigateurs
BCD tables only load in the browser