Docs ejecutables de CSS: Subrayado en CSS

Q: ¿Cómo subrayo texto en CSS?

Usa text-decoration: underline; en el elemento. Para el aspecto de la línea, agrega text-decoration-color, text-decoration-style, text-decoration-thickness y text-underline-offset.

Q: ¿Cómo quito el subrayado de un enlace?

Define text-decoration: none; en el elemento a. Asegúrate de que los enlaces sigan destacando de otra forma (color más un subrayado en hover o foco), porque muchos lectores dependen del subrayado para encontrar los enlaces.

Q: ¿Cómo cambio el color del subrayado?

Usa text-decoration-color, o la abreviatura: text-decoration: underline #f59e0b;. Sin él, la línea usa el color del texto.

Q: ¿Cómo agrego espacio entre el texto y el subrayado?

Usa text-underline-offset, por ejemplo text-underline-offset: 4px;. Los valores más grandes alejan la línea hacia abajo del texto.

Cómo subrayar texto en CSS

text-decoration: underline dibuja una línea debajo del texto. La línea toma el color del texto salvo que le des uno.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Underline</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 22px; color: #111827; }
    .under { text-decoration: underline; }
    .styled {
      text-decoration: underline wavy #f59e0b;
      text-decoration-thickness: 2px;
      text-underline-offset: 5px;
    }
  </style>
</head>
<body>
  <p class="under">A plain underline</p>
  <p class="styled">A wavy amber underline, 2px thick, 5px below</p>
</body>
</html>

La segunda línea usa la abreviatura text-decoration para el tipo de línea, el estilo y el color, y después define el grosor y la separación con sus propias propiedades. La especificación también permite el grosor dentro de la abreviatura, pero Safari descarta toda la declaración cuando lo incluyes, así que escribe text-decoration-thickness por separado.

Las propiedades de text-decoration

Propiedad	Valores	Por defecto
`text-decoration-line`	`underline`, `overline`, `line-through`, `none` (se pueden combinar)	`none`
`text-decoration-style`	`solid`, `double`, `dotted`, `dashed`, `wavy`	`solid`
`text-decoration-color`	Cualquier color	`currentColor` (el color del texto)
`text-decoration-thickness`	Una longitud, un porcentaje, `auto`, `from-font`	`auto`
`text-underline-offset`	Una longitud, un porcentaje, `auto`	`auto`

text-decoration es la abreviatura de las cuatro primeras, pero deja el grosor fuera: Safari ignora una declaración text-decoration que lo contiene. text-underline-offset es aparte y hay que escribirla sola.

Estilos, colores y grosor

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Underline styles</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 20px; color: #111827; }
    p { margin: 10px 0; text-decoration-line: underline; }
    .solid { text-decoration-style: solid; }
    .double { text-decoration-style: double; }
    .dotted { text-decoration-style: dotted; }
    .dashed { text-decoration-style: dashed; }
    .wavy { text-decoration-style: wavy; text-decoration-color: #dc2626; }
    .thick { text-decoration-thickness: 4px; text-decoration-color: #2563eb; }
  </style>
</head>
<body>
  <p class="solid">solid</p>
  <p class="double">double</p>
  <p class="dotted">dotted</p>
  <p class="dashed">dashed</p>
  <p class="wavy">wavy and red, like a spelling error</p>
  <p class="thick">4px thick and blue</p>
</body>
</html>

Mover el subrayado: text-underline-offset

Por defecto la línea queda cerca de las letras y rodea los trazos descendentes como los de la g, la p y la y. text-underline-offset la baja más, lo que suele verse más limpio en títulos y enlaces:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Underline offset</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 24px; color: #111827; }
    p { text-decoration: underline #2563eb; text-decoration-thickness: 2px; margin: 12px 0; }
    .o2 { text-underline-offset: 2px; }
    .o6 { text-underline-offset: 6px; }
    .o10 { text-underline-offset: 10px; }
  </style>
</head>
<body>
  <p>Typography (auto)</p>
  <p class="o2">Typography (2px)</p>
  <p class="o6">Typography (6px)</p>
  <p class="o10">Typography (10px)</p>
</body>
</html>

Los huecos alrededor de los trazos descendentes vienen de text-decoration-skip-ink: auto, que está activado por defecto. Ponlo en none para una línea continua.

Quitar el subrayado de los enlaces

La hoja de estilo del navegador subraya los enlaces. text-decoration: none lo quita. Como muchos lectores encuentran los enlaces por su subrayado, recupéralo en hover y con el foco del teclado, y dale al enlace un color distinto al del texto:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Link underlines</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; color: #111827; }
    nav a {
      color: #2563eb;
      text-decoration: none;
      margin-inline-end: 16px;
    }
    nav a:hover,
    nav a:focus-visible {
      text-decoration: underline;
      text-underline-offset: 4px;
    }
  </style>
</head>
<body>
  <nav>
    <a href="#home" id="first">Home</a>
    <a href="#docs">Docs</a>
    <a href="#blog">Blog</a>
  </nav>
  <p>Links in a paragraph, like <a href="#more">this one</a>, keep their underline.</p>
</body>
</html>

Las barras de navegación y los botones son un lugar razonable para quitar el subrayado, porque su posición ya dice "enlace". Dentro de un párrafo de texto, mantenlo. Hay más sobre los estados de los enlaces en la página de hover.

Línea superior y tachado

text-decoration-line también dibuja una línea encima del texto o a través de él, y acepta más de un valor:

.old-price { text-decoration: line-through; }
.both      { text-decoration-line: underline overline; }

El tachado con CSS es solo visual. Cuando el texto es contenido eliminado (un precio que cambió, un artículo quitado), márcalo con <s> o <del>, como muestra la página de subrayado en HTML, para que el significado esté en el marcado y no solo en el estilo.

Errores comunes

Usar <u> para subrayar por estilo. <u> es para texto marcado como distinto, como las faltas de ortografía. Para un subrayado con estilo, usa CSS.
Subrayar texto que no es un enlace. Los lectores intentarán hacer clic. Para enfatizar, usa negrita, color o un fondo.
Quitar el subrayado de los enlaces en el texto del cuerpo sin otra pista. El color solo no basta para los lectores que no ven la diferencia.
Intentar quitar el subrayado de un padre desde un hijo. No se puede deshacer desde dentro; cambia el padre o haz que el hijo sea inline-block.
Esperar text-underline-offset en la abreviatura. Es una propiedad aparte.
Poner el grosor en la abreviatura. text-decoration: underline 2px funciona en Chrome y Firefox, pero Safari descarta toda la declaración. Usa text-decoration-thickness.

Preguntas frecuentes

¿Cómo subrayo texto en CSS?

Usa text-decoration: underline; en el elemento. Para el aspecto de la línea, agrega text-decoration-color, text-decoration-style, text-decoration-thickness y text-underline-offset.

¿Cómo quito el subrayado de un enlace?

Define text-decoration: none; en el elemento a. Asegúrate de que los enlaces sigan destacando de otra forma (color más un subrayado en hover o foco), porque muchos lectores dependen del subrayado para encontrar los enlaces.

¿Cómo cambio el color del subrayado?

Usa text-decoration-color, o la abreviatura: text-decoration: underline #f59e0b;. Sin él, la línea usa el color del texto.

¿Cómo agrego espacio entre el texto y el subrayado?

Usa text-underline-offset, por ejemplo text-underline-offset: 4px;. Los valores más grandes alejan la línea hacia abajo del texto.

¿Por qué no puedo quitar el subrayado de un elemento hijo?

Un subrayado que dibuja un padre se pinta por encima de sus hijos y no se puede quitar desde dentro de ellos. Quítalo en el elemento que lo define, o haz que el hijo sea display: inline-block, al que no llega la decoración del padre.

Conceptos relacionados