Propriété CSS text-underline-position

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>

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>

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.

Support de Navigateurs

33.0+ 12.0+ x x x


Trouvez-vous cela utile?

Articles Associées