Decoracion-de-texto - Trucos CSS

Tabla de contenido

La text-decoration-linepropiedad decora el texto con un subrayado, una línea superior, una línea completa o una combinación de esas líneas.

p ( text-decoration-line: underline; )

Valores

  • none: no se agrega ninguna línea y se eliminan las líneas existentes; por ejemplo, noneelimina el subrayado predeterminado en los enlaces.
  • underline: agrega un subrayado de 1 px debajo del texto.
  • overline: agrega una superposición de 1 px sobre el texto.
  • line-through: agrega una línea de 1 px a través del texto.
  • inherit: hereda la decoración del padre.

El valor blinkestá 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.

Combinando valores

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-line: overline underline line-through; )

Uso

La text-decoration-linepropiedad es prácticamente idéntica a la text-decorationpropiedad original . Si todo lo que desea hacer es agregar una línea o líneas a su texto, text-decorationes una mejor opción porque es compatible con todos los navegadores, incluso los más antiguos. Generalmente, usar una text-decoration-linedeclaración solo tiene sentido cuando está escribiendo una regla de estilo a mano que incluye text-decoration-styleo una text-decoration-colordeclaración. Si desea usar los tres juntos, puede usar la text-decorationpropiedad abreviada .

Taquigrafía

text-decoration-linese puede usar en combinación con text-decoration-styley text-decoration-coloren la text-decorationpropiedad CSS3 abreviada (actualmente solo Firefox es totalmente compatible con esto):

.underlined ( text-decoration: underline dotted red; )

Manifestación

Esta demostración funcionará en Safari, Firefox y Chrome con las funciones experimentales de la plataforma web habilitadas. El blinkvalor no esta incluido.

Vea la línea de decoración de texto de Pen de CSS-Tricks (@ css-tricks) en CodePen.

Relacionado

  • decoración de texto
  • estilo de decoración de texto
  • color-decoracion-texto
  • Saltar decoración de texto

Más información

  • text-decoration-line en la especificación W3C
  • text-decoration-line en MDN

Soporte del navegador

Cromo Safari Firefox Ópera ES DECIR Androide iOS
31 * † 7.1 * 6 ‡ Ninguno Ninguno Ninguno 8 *

* con -webkitprefijo
† con marca de características experimentales de la plataforma web habilitada
‡ 6 - 35 con -mozprefijo, sin prefijo a partir de 36.

Articulos interesantes...