Decoración de texto - Trucos CSS

Tabla de contenido

La text-decorationpropiedad agrega un subrayado, una línea superior, una línea continua o una combinación de líneas al texto seleccionado.

h3 ( text-decoration: underline; )

Valores

  • none: no se traza ninguna línea y se elimina cualquier decoración existente.
  • underline: dibuja una línea de 1 px a través del texto en su línea de base.
  • line-through: dibuja una línea de 1 px a través del texto en su punto "medio".
  • overline: dibuja una línea de 1 px a través del texto, directamente sobre su punto "superior".
  • inherit: hereda la decoración del padre.

El blinkvalor está en la especificación W3C, pero está obsoleto y no funcionará en ningún navegador actual. Cuando funcionó, hizo que el texto pareciera "parpadear" al alternarlo rápidamente entre 0% y 100% de opacidad.

Manifestación

Vea los trucos CSS del lápiz: decoración de texto mediante trucos CSS (@ css-tricks) en CodePen.

Notas de uso

Se pueden combinar los underline, overlineo line-throughvalores de una lista separada por espacios de añadir múltiples líneas de decoración:

p ( text-decoration: overline underline line-through; )

De forma predeterminada, la línea o las líneas heredan el color del texto establecido por su colorpropiedad. Puede cambiar esto en los navegadores que admiten la text-decoration-colorpropiedad o la propiedad abreviada de tres valores.

text-decoration como una propiedad taquigráfica

text-decorationse puede utilizar en combinación con text-decoration-styley text-decoration-colorcomo propiedad abreviada:

.fancy-underline ( text-decoration-line: underline; text-decoration-style: wavy; text-decoration-color: red; /* can be shortened to */ text-decoration: underline wavy red; )

Actualmente, solo Firefox admite este sin prefijo. Safari lo admite con el -webkitprefijo. Chrome también necesita las -webkitfunciones de plataforma web experimental y prefijo habilitadas en las banderas de Chrome.

Relacionado

  • text-decoration-color
  • text-decoration-line
  • text-decoration-style
  • text-decoration-skip

Más información

  • text-decoration como una propiedad abreviada en la especificación W3C Módulo de decoración de texto CSS Nivel 3 CR
  • decoración de texto en MDN

Soporte del navegador

Todos los navegadores admiten la propiedad "longhand" de CSS2.1 text-decoration. La propiedad abreviada y las sub-propiedades text-decoration-color, text-decoration-liney text-decoration-styleson compatibles sin prefijo en Firefox, y con el -webkitprefijo en Safari. Chrome también reconocerá esos valores con el -webkitprefijo y la marca de Plataformas web experimentales habilitadas.

Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión en adelante.

Escritorio

Cromo Firefox ES DECIR Borde Safari
91 87 No 88 TP

Móvil / Tablet

Android Chrome Android Firefox Androide Safari de iOS
88 85 81 14,0-14,4 *

* text-decorationTotalmente compatible, subpropiedades compatibles con -webkitprefijo.
† Las subpropiedades también requieren que la marca de características de la plataforma web experimental esté habilitada.
‡ CSS2.1 text-decorationsolamente; subpropiedades no admitidas.

Articulos interesantes...