Propiedad CSS text-underline-position - Sintaxis, valores y ejemplos

La propiedad CSS text-underline-position controla dónde se dibuja el subrayado en relación con el texto. Solo tiene efecto cuando ya existe un subrayado, es decir, cuando el elemento tiene text-decoration (o text-decoration-line) configurado como underline. Por sí sola, text-underline-position nunca dibuja un subrayado; únicamente lo reposiciona.

Por defecto (auto), el navegador coloca el subrayado cerca de la línea base alfabética del texto. Esto se ve bien en la mayoría del texto latino, pero la línea puede chocar con los descendentes de letras como g, j, p, q e y. Al establecer text-underline-position: under se empuja la línea por debajo de todos los descendentes para que nunca los atraviese — muy útil en listados de código, fórmulas matemáticas o químicas donde importa mantener una separación limpia.

Esta página cubre la sintaxis, todos los valores, cuándo usar cada uno y ejemplos ejecutables.

¿Cuándo lo usaría?

Subrayados más limpios — usa under para que la línea no corte los descendentes (p, y, g) sino que quede debajo de ellos.
Anotación de fórmulas — bajo fórmulas matemáticas o químicas donde superponerse a la línea base resultaría ambiguo.
Texto vertical — left y right eligen a qué lado de los glifos se coloca la línea cuando writing-mode es vertical.

La propiedad text-underline-position es 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

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

La palabra clave auto no puede combinarse con ningún otro valor. Las palabras clave under, left y right pueden combinarse (por ejemplo, under left), pero left y right son mutuamente excluyentes — solo se puede elegir una de ellas, opcionalmente junto con under.

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

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 »

Ejemplo con writing-mode vertical y el valor "left":

En texto vertical, left y right deciden en qué lado de los caracteres se traza el subrayado.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        writing-mode: vertical-rl;
        text-decoration: underline;
        text-underline-position: left;
        font-size: 25px;
      }
    </style>
  </head>
  <body>
    <h2>Vertical text with text-underline-position: left</h2>
    <p>Lorem Ipsum is simply dummy text.</p>
  </body>
</html>

Valores

Valor	Descripción
auto	Predeterminado. El navegador usa su propio algoritmo para colocar la línea en la línea base alfabética o justo por debajo de ella.
under	Fuerza el subrayado por debajo del contenido de texto para que no corte los descendentes de letras como `g`, `p` e `y`.
left	En un writing-mode vertical, coloca el subrayado en el lado izquierdo del texto. Se ignora en texto horizontal.
right	En un writing-mode vertical, coloca el subrayado en el lado derecho del texto. Se ignora en texto horizontal.
initial	Hace que la propiedad use su valor predeterminado (`auto`).
inherit	Hereda la propiedad de su elemento padre.

Propiedades relacionadas

text-decoration — la propiedad abreviada que realmente dibuja la línea (text-underline-position solo la reposiciona).
text-decoration-line — elige underline, overline o line-through.
text-decoration-color — establece el color del subrayado.
text-decoration-style — líneas sólidas, discontinuas, punteadas, dobles u onduladas.

Práctica

¿Cuál afirmación sobre text-underline-position es correcta?

El valor 'under' coloca el subrayado por debajo de los descendentes como g, p e y.text-underline-position dibuja un subrayado incluso sin text-decoration.El valor 'auto' puede combinarse con 'under' (por ejemplo, 'auto under').