W3docs
fr
Se connecter

Propriété CSS text-underline-position

Utilisez la propriété CSS text-underline-position pour définir la position du soulignement d'un élément. Valeurs et exemples inclus.

La propriété CSS text-underline-position contrôle l'emplacement où le soulignement est tracé par rapport au texte. Elle n'a d'effet que lorsqu'un soulignement existe déjà — c'est-à-dire lorsque l'élément a text-decoration (ou text-decoration-line) défini sur underline. Seule, text-underline-position ne dessine jamais de soulignement ; elle se contente de le repositionner.

Par défaut (auto), le navigateur place le soulignement proche de la ligne de base alphabétique du texte. Cela convient pour la plupart des textes latins, mais la ligne peut entrer en collision avec les jambages des lettres comme g, j, p, q et y. Définir text-underline-position: under pousse la ligne sous tous les jambages afin qu'elle ne les croise jamais — pratique pour les listes de code, les formules mathématiques ou chimiques où un espace net est important.

Cette page couvre la syntaxe, toutes les valeurs, quand utiliser chacune d'elles, ainsi que des exemples interactifs.

Quand l'utiliser ?

  • Soulignements plus nets — utilisez under pour que la ligne passe sous les jambages (p, y, g) au lieu de les couper.
  • Annotation de formules — sous des formules mathématiques ou chimiques où chevaucher la ligne de base serait ambigu.
  • Texte vertical — left et right choisissent de quel côté des glyphes la ligne se place lorsque writing-mode est vertical.

La propriété text-underline-position est prise en charge par tous les navigateurs modernes.

Valeur initialeauto
S'applique àTous les éléments.
HéritéeOui.
AnimatableNon.
VersionCSS3
Syntaxe DOMobject.style.textUnderlinePosition = "under";

Remarque : en JavaScript, les propriétés CSS comportant des tirets sont converties en camelCase (par exemple, text-underline-position devient textUnderlinePosition).

Syntaxe

Valeurs CSS de text-underline-position

text-underline-position: auto | [ under || left || right ] | initial | inherit;

Le mot-clé auto ne peut pas être combiné avec une autre valeur. Les mots-clés under, left et right peuvent être combinés (par exemple under left), mais left et right sont mutuellement exclusifs — vous pouvez en choisir un, éventuellement accompagné de under.

Exemple de la propriété text-underline-position :

Exemple de code CSS text-underline-position

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        text-decoration: underline;
        text-underline-position: under;
      }
    </style>
  </head>
  <body>
    <h2>Text underline-position property example</h2>
    <p>Lorem Ipsum is simply dummy text...</p>
  </body>
</html>
Essayez vous-même »

Résultat

Valeur under de la propriété CSS text-underline-position

Exemple de la propriété text-underline-position avec la valeur « under » :

Exemple de valeur under pour CSS text-underline-position

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        text-decoration: underline;
        text-underline-position: under;
        text-decoration-color: #1c87c9;
        font-size: 25px;
      }
    </style>
  </head>
  <body>
    <h2>Text underline-position property example</h2>
    <p>Lorem Ipsum is simply dummy text...</p>
  </body>
</html>
Essayez vous-même »

Exemple avec writing-mode vertical et la valeur « left » :

En texte vertical, left et right déterminent de quel côté des caractères le soulignement court.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        writing-mode: vertical-rl;
        text-decoration: underline;
        text-underline-position: left;
        font-size: 25px;
      }
    </style>
  </head>
  <body>
    <h2>Vertical text with text-underline-position: left</h2>
    <p>Lorem Ipsum is simply dummy text.</p>
  </body>
</html>

Valeurs

ValeurDescription
autoPar défaut. Le navigateur utilise son propre algorithme pour placer la ligne au niveau ou juste en dessous de la ligne de base alphabétique.
underForce le soulignement sous le contenu textuel afin qu'il passe sous les jambages des lettres comme g, p et y.
leftDans un writing-mode vertical, place le soulignement à gauche du texte. Ignoré en texte horizontal.
rightDans un writing-mode vertical, place le soulignement à droite du texte. Ignoré en texte horizontal.
initialApplique la valeur par défaut de la propriété (auto).
inheritHérite de la propriété de son élément parent.

Propriétés associées

Entraînement

Pratique
Quelle affirmation concernant text-underline-position est correcte ?
Quelle affirmation concernant text-underline-position est correcte ?
Was this page helpful?