W3docs
es
Iniciar sesión

Propiedad CSS text-underline-position

Use the text-underline-position CSS property to specify the position of an underline for the element. See property values and try examples.

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 inicialauto
Se aplica aTodos los elementos.
HeredableSí.
AnimableNo.
VersiónCSS3
Sintaxis DOMobject.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

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

<!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>
Pruébalo tú mismo »

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

<!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>
Pruébalo tú mismo »

Valores

ValorDescripción
autoEl navegador utiliza su propio algoritmo para colocar la línea en o debajo de la línea base alfabética.
underObliga a que el subrayado se coloque debajo del contenido de texto del elemento.
leftObliga a que el subrayado se coloque en el lado izquierdo del texto en el modo de escritura vertical.
rightObliga a que el subrayado se coloque en el lado derecho del texto en el modo de escritura vertical.
aboveObliga a que la línea se coloque encima del texto.
belowObliga a que la línea se coloque debajo del texto.
initialHace que la propiedad utilice su valor predeterminado.
inheritHereda la propiedad de su elemento padre.

Práctica

Práctica

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