Propriété CSS text-underline-position

La propriété text-underline-position spécifie la position du trait de soulignement sur l'élément dont la valeur de text-decoration est définie sur "underline".

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

Valeur initiale	auto
S'applique à	Tous les éléments.
Héritée	Oui.
Animable	Non.
Version	CSS3
Syntaxe DOM	object.style.textUnderlinePosition = "under";

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

Syntaxe

Valeurs CSS de text-underline-position

css

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

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

Exemple de code CSS pour text-underline-position

html

<!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>

Try it Yourself »

Résultat

Valeur "under" de 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

html

<!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>

Try it Yourself »

Valeurs

Valeur	Description
auto	Le navigateur utilise son propre algorithme pour placer la ligne au niveau ou en dessous de la ligne de base alphabétique.
under	Force le trait de soulignement à être placé sous le contenu textuel de l'élément.
left	Force le trait de soulignement à être placé à gauche du texte en mode d'écriture vertical.
right	Force le trait de soulignement à être placé à droite du texte en mode d'écriture vertical.
above	Force la ligne à être au-dessus du texte.
below	Force la ligne à être en dessous du texte.
initial	Définit la valeur par défaut de la propriété.
inherit	Hérite la propriété de l'élément parent.

Pratique

Quelle affirmation est incorrecte concernant la propriété text-underline-position ?

Elle est prise en charge par tous les navigateurs.La valeur "below" force la ligne à être en dessous du texte.La valeur "auto-pos" fonctionne de la même manière que la valeur auto.

Propriété CSS text-underline-position ​

Syntaxe ​

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

Résultat ​

Exemple de la propriété text-underline-position avec la valeur "under" : ​

Valeurs ​