Propriété CSS text-underline-position

❮ Précédent Suivant ❯

La propriété text-underline-position spécifie la position du soulignement de l'élément avec la valeur "underline" de text-decoration spécifiée.

Text-underline-position n'est que partiellement pris en charge par Chrome.

Pour la compatibilité maximale des navigateurs, les extensions telles que -webkit- pour Safari, Google Chrome, et Opera (plus nouvelles versions), sont utilisées avec cette propriété.

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

Syntaxe

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

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      p {
      text-decoration: underline;
      -webkit-text-underline-position: auto;
      -ms-text-underline-position: auto;
      text-underline-position: auto; 
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété text underline-position</h2>
    <p>Lorem Ipsum est simplement du faux texte...</p>
  </body>
</html>

Essayez-vous-même!

Un autre exemple dans lequel la position du souslignement est définie comme "under":

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      p { 
      text-decoration: underline; 
      -webkit-text-underline-position: under;
      -ms-text-underline-position: under;
      text-underline-position: under; 
      text-decoration-color: #1c87c9;
      font-size: 25px; 
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété text underline-position</h2>
    <p>Lorem Ipsum est siimplement du faux texte...</p>
  </body>
</html>

Essayez-vous-même!

Valeurs

Valeur	Description
auto	Le navigateur utilise son propre algorithme pour placer la ligne sur ou sous la ligne de base alphabetique.
under	Le soulignement est placé sous le contenu textuel de l'élément.
left	L'élément est placé sur le côté gauche du texte dans la mode d'écriture vertical.
right	L'élément est placé sur le côté droit du texte dans la mode d'écriture vertical.
above	L'élément est placé au dessus du texte.
below	La ligne est sous le texte.
auto-pos	La même que la valeur auto.
initial	Fait utiliser la valeur initiale.
inherit	Hérite la propriété de son élément parent.