text-underline-offset
Baseline Widely available *
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis novembre 2020.
* Certaines parties de cette fonctionnalité peuvent bénéficier de prise en charge variables.
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
/* 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 desemcomme 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
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
| Specification |
|---|
| CSS Text Decoration Module Level 4 # underline-offset |