19. Texto en CSS (2)

text-decoration

En este capítulo aprenderá acerca de las siguientes propiedades:

• text-decoration-line
• text-decoration-color
• text-decoration-style
• text-decoration-thickness
• text-decoration

La propiedad text-decoration-line se usa para agregar una línea de decoración al texto.

Sugerencia: puedes combinar más de un valor, como sobrerayado y subrayado, para mostrar líneas tanto encima como debajo de un texto.

Ejm

h1 {
  text-decoration-line: overline;
}

h2 {
  text-decoration-line: line-through;
}

h3 {
  text-decoration-line: underline;
}

p {
  text-decoration-line: overline underline;
}

Nota: No se recomienda subrayar el texto que no sea un enlace, ya que esto suele confundir al lector.

Establecer un color para la linea de decoración

La propiedad text-decoration-color se utiliza para establecer el color de la línea de decoración.

Ejm

h1 {
  text-decoration-line: overline;
  text-decoration-color: red;
}

h2 {
  text-decoration-line: line-through;
  text-decoration-color: blue;
}

h3 {
  text-decoration-line: underline;
  text-decoration-color: green;
}

p {
  text-decoration-line: overline underline;
  text-decoration-color: purple;
}

Establecer un estilo para la linea de decoración

La propiedad text-decoration-style se utiliza para establecer el estilo de la línea de decoración.

Ejm

h1 {
  text-decoration-line: underline;
  text-decoration-style: solid;
}

h2 {
  text-decoration-line: underline;
  text-decoration-style: double;
}

h3 {
  text-decoration-line: underline;
  text-decoration-style: dotted;
}

p.ex1 {
  text-decoration-line: underline;
  text-decoration-style: dashed;
}

p.ex2 {
  text-decoration-line: underline;
  text-decoration-style: wavy;
}

p.ex3 {
  text-decoration-line: underline;
  text-decoration-color: red;
  text-decoration-style: wavy;
}

Especificar el grosor de la línea de decoración

La propiedad text-decoration-thickness se utiliza para establecer el grosor de la línea de decoración.

Ejm

h1 {
  text-decoration-line: underline;
  text-decoration-thickness: auto;
}

h2 {
  text-decoration-line: underline;
  text-decoration-thickness: 5px;
}

h3 {
  text-decoration-line: underline;
  text-decoration-thickness: 25%;
}

p {
  text-decoration-line: underline;
  text-decoration-color: red;
  text-decoration-style: double;
  text-decoration-thickness: 5px;
}

Forma corta de escribir

La propiedad text-decoration es una propiedad abreviada para:

• text-decoration-line (requerido)
• text-decoration-color (opcional)
• text-decoration-style (opcional)
• text-decoration-thickness (opcional)

Ejm

h1 {
  text-decoration: underline;
}

h2 {
  text-decoration: underline red;
}

h3 {
  text-decoration: underline red double;
}

p {
  text-decoration: underline red double 5px;
}

Un pequeño consejo

Todos los enlaces en HTML están subrayados por defecto. A veces ves que los enlaces tienen un estilo sin subrayar. text-decoration: none; se utiliza para eliminar el subrayado de los enlaces, como este.

Ejm

a {
  text-decoration: none;
}