Un strikethrough se define como una línea a través del texto. Se usa comúnmente para mostrar texto irrelevante, pero también podemos utilizarlo para la decoración. Las primeras versiones de HTML usaron elemento para hacer un texto de texto. Sin embargo, HTML5 no admite el elemento. Más específicamente, en CSS, el "decoración de texto"El valor de la propiedad se establece como"lineal"Para el mismo propósito.

Este artículo lo guiará sobre el CSS Strikethrough y las otras propiedades de decoración de texto. Entonces, comencemos!

¿Cuáles son las propiedades CSS de decoración de texto??

Hay muchos "decoración de texto"Valores de propiedad utilizados en CSS. Algunos de ellos se enumeran a continuación:

• lineal
• subrayar
• exceso
• ninguno

Pasemos sobre ellos uno por uno!

Decoración de texto: línea

El "lineal"La propiedad de decoración de texto se utiliza para agregar una línea horizontal a través del texto. Esta propiedad también se conoce como texto cruzado.

Ejemplo 1: Cómo usar CSS Strikethrough?

Primero, agregaremos un nombrado "envase"Dentro del elemento del cuerpo del archivo HTML. Entonces, incluya el

Etiqueta para agregar algún texto.

Html

Decoración de texto: Strikethrough

En la sección CSS, asigne el valor de la propiedad de decoración de texto como "lineal".

CSS

Decoración de texto: línea a través de;

Se puede ver que la propiedad de línea se aplica correctamente al texto agregado:

Para que esta decoración sea más interesante, aplicemos algo de animación.

Ejemplo 2: Cómo aplicar la animación en Strikethrough con CSS?

Agregue un elemento Div dentro del elemento del cuerpo del archivo HTML. Dentro del div, coloca un encabezado

Etiqueta con algún texto.

Html

Bienvenido a Linuxhint!

A continuación, aplique estilos a los elementos HTML.

CSS

Los elementos HTML están diseñados con propiedades CSS. Para establecer la alineación del texto en el centro, el elemento DIV se proporciona con la propiedad Text-Align con el Centro de valores:

div
Text-Align: Center;

Estilo Línea Div

.línea
Font-Family: Sans-Serif;
tamaño de fuente: 60px;
Color: #00154f;
Posición: relativo;
Pantalla: bloque en línea;
cursor: puntero;

Las propiedades CSS que se aplican a la línea Div se explican a continuación:

• "Familia tipográfica"La propiedad establece la familia de fuentes del texto como"sans-serif".
• "tamaño de fuente"Propiedad con valor"60px"Establece el tamaño de la fuente a 60px.
• "colorLa propiedad se utiliza para especificar el color del texto.
• "posición"Con valor"relativo"Ajusta la línea div en relación con su posición actual.
• "mostrar"Propiedad como una"bloqueo en línea"Permitirá la configuración del ancho de la línea y restringirá el contenido para que se muestre en la siguiente línea.
• "cursor"Con el valor"puntero"Especifica que cuando el mouse se cierne sobre el texto, se mostrará un cursor de mano puntiaguda.

Estilo Línea Div después del selector

El código dado a continuación peinará la línea Div después de que se seleccione. El "::después"Se conoce como el selector posterior:

.línea :: después
contenido: ";
bloqueo de pantalla;
Ancho: 0;
Altura: 20px;
Color de fondo: #F4AF1B;
Posición: Absoluto;
Abajo: 10%;
Índice Z: -1;
Transición: ancho 1s;

Después de seleccionar la línea, las propiedades mencionadas se aplicarán como se explica:

• "contenidoSe utiliza la propiedad para insertar el contenido especificado en el elemento. Si el valor es ninguno, entonces, después de la selección, el contenido se establece de acuerdo con el código pseudo mencionado.
• "mostrar"Como un bloque toma el ancho de pantalla disponible y establece el bloque para comenzar en una nueva línea.
• "anchoSe utiliza la propiedad para establecer el ancho del elemento.
• "alturaSe utiliza la propiedad para establecer la altura del elemento.
• "color de fondoSe utiliza la propiedad para establecer el color de fondo del elemento.
• "posición"A medida que absoluta se refiere, la línea div se posicionará en relación con su principal Div después de la selección.
• "abajoLa propiedad agrega 10% de espacio en la parte inferior de la línea.
• "índice z"Define el orden de los elementos superpuestos.
• "transiciónLa propiedad establece el movimiento del elemento donde el valor de ancho representa la transición que debe aplicarse en la propiedad de ancho de un elemento, y 1s es su duración.

Línea de estilo Div After Hover

Establezca el ancho del contenedor de línea como 100% cuando el mouse se cierne sobre él:

.Línea: Hover :: After
Ancho: 100%;

Como resultado, flotar sobre el texto agregado agregará un strikethrough animado:

Decoración de texto: subrayado

El "subrayar"El valor de la propiedad de decoración de texto colocará una línea debajo del texto. Esta propiedad se utiliza principalmente para hacer que el texto requerido sea prominente.

CSS

Decoración de texto: subrayado;

Producción

Decoración de texto: sobreventa

La decoración de sobreline se refiere al texto que tiene una línea horizontal sobre ella. También se conoce como un overbar. Más específicamente, para hacer que un texto se sobreinice, asigne el "decoración de texto"Propiedad un valor"exceso".

CSS

Decoración de texto: Overline;

Al asignar el valor de sobreline, se puede observar que se muestra una barra sobre el texto:

Decoración de texto: ninguno

Si no necesita ninguna decoración de texto, asigne el valor "ninguno" hacia "decoración de texto" propiedad.

CSS

Decoración de texto: ninguna;

Producción

Hasta ahora, hemos discutido las propiedades de decoración de texto, línea a través, subrayar, superar y ninguno con ejemplos. La siguiente sección discutirá los valores de atributo de decoración de texto. Entonces vamos!

valores de atributo de decoración de texto

Puede utilizar también otros valores de atributos:

• línea de texto de texto: Define el tipo de línea como subrayar, línea a través, sobreline y más.
• color-decoración de texto: Define el color de la línea.
• estilo de texto al estilo: Especifica el estilo de la línea, ya sea ondulado, punteado, discontinuo, etc.
• text-decoración-espesor: Define el ancho de la línea.

Mire el ejemplo a continuación, que muestra la decoración de texto con múltiples valores discutidos anteriormente.

Ejemplo

En primer lugar, agregue una línea punteada sobre el texto que tiene un ancho de 10 px y el color especificado:

Decoración de texto: Overline Docted 10px #00154f;

Luego, un subrayado ondulado con el ancho y el color requeridos:

Decoración de texto: subrayar Wavy 9PX RGB (249, 253, 2);

Las líneas de código CSS proporcionadas anteriormente mostrarán los siguientes resultados:

Hemos proporcionado la información relacionada con el CSS Strikethrough y otras propiedades de decoración de texto.

Conclusión

Las propiedades de decoración de texto de CSS establecen la apariencia de diferentes líneas decorativas en el texto agregado. Más específicamente, Strikethrough agrega una línea a través del texto que se puede aplicar estableciendo el valor de la decoración del texto como "lineal". Esta publicación discutió el CSS Strikethrough, otras propiedades de decoración de texto y valores de atributos.