Propiedad CSS text-underline-position

La propiedad text-underline-position especifica la posición del subrayado en el elemento con el valor "underline" especificado en text-decoration.

La propiedad text-underline-position es ampliamente compatible con todos los navegadores modernos.

Valor inicial	auto
Se aplica a	Todos los elementos.
Heredable	Sí.
Animable	No.
Versión	CSS3
Sintaxis DOM	object.style.textUnderlinePosition = "under";

Nota: En JavaScript, las propiedades CSS con guiones se convierten a camelCase (por ejemplo, text-underline-position se convierte en textUnderlinePosition).

Sintaxis

Valores de CSS text-underline-position

css

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

Ejemplo de la propiedad text-underline-position:

Ejemplo de código CSS 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 »

Resultado

Valor under de CSS text-underline-position

Ejemplo de la propiedad text-underline-position con el valor "under":

Ejemplo del valor under de 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 »

Valores

Valor	Descripción
auto	El navegador utiliza su propio algoritmo para colocar la línea en o debajo de la línea base alfabética.
under	Obliga a que el subrayado se coloque debajo del contenido de texto del elemento.
left	Obliga a que el subrayado se coloque en el lado izquierdo del texto en el modo de escritura vertical.
right	Obliga a que el subrayado se coloque en el lado derecho del texto en el modo de escritura vertical.
above	Obliga a que la línea se coloque encima del texto.
below	Obliga a que la línea se coloque debajo del texto.
initial	Hace que la propiedad utilice su valor predeterminado.
inherit	Hereda la propiedad de su elemento padre.

Práctica

¿Cuál afirmación es incorrecta sobre la propiedad text-underline-position?

Es compatible con todos los navegadores.El valor "below" obliga a que la línea se coloque debajo del texto.El valor "auto-pos" funciona igual que el valor auto.

Propiedad CSS text-underline-position ​

Sintaxis ​

Ejemplo de la propiedad text-underline-position: ​

Resultado ​

Ejemplo de la propiedad text-underline-position con el valor "under": ​

Valores ​