CSS strikethrough

El estilo de tachado en CSS es una propiedad de texto que permite agregar una línea horizontal a través del medio del contenido. Esta técnica es comúnmente utilizada en el diseño web para indicar contenido eliminado o antiguo, o para simbolizar cambios en los precios o descuentos en las aplicaciones de comercio electrónico. El uso de la línea de tachado puede ayudar a resaltar información relevante de manera efectiva. En este artículo, discutiremos cómo implementar estilos de tachado en CSS, junto con algunos ejemplos y mejores prácticas.

Implementación de estilos de tachado

Para aplicar el estilo de tachado a un texto en CSS, necesitarás utilizar la propiedad text-decoration con el valor line-through. Esta propiedad añade una línea a través del medio del contenido especificado. Por ejemplo:

Este es un <p> párrafo con un <strike> texto tachado usando CSS </strike>.

• Crea un elemento HTML como un <p> o <span>.
• Añade el contenido deseado al elemento.
• En la hoja CSS, añade el selector para el elemento HTML.
• Usa la propiedad text-decoration con el valor line-through para aplicar el estilo de tachado al contenido.

A continuación, se muestra un ejemplo que aplica estilos de tachado a un elemento de encabezado h1:


h1 {
text-decoration: line-through;
}


Esto aplicará un estilo de tachado en línea a todo el contenido del elemento de encabezado h1. Puedes ajustar el tamaño, el color, la posición y otros aspectos del estilo de tachado utilizando otras propiedades CSS.

Personalización de estilos de tachado

La propiedad text-decoration puede personalizarse aún más usando otras propiedades CSS. Por ejemplo, puedes personalizar el color de la línea de tachado utilizando la propiedad color. También puedes ajustar el grosor y el estilo de la línea de tachado utilizando las propiedades border-top, border-bottom y border-width. A continuación, se muestran algunos ejemplos de cómo ajustar el estilo de tachado:


h1 {
text-decoration: line-through;
color: red;
border-top: 1px solid black;
border-bottom: 1px solid black;
border-width: 0 0 2px 0;
}


Este código aplicará un estilo de tachado rojo con una línea superior e inferior de color negro y un grosor de 2 píxeles en la parte inferior.

Conclusión

La aplicación de estilos de tachado en CSS es una técnica efectiva para resaltar la información relevante eliminada o antigua. La propiedad text-decoration con el valor line-through permite agregar una línea horizontal a través del medio del contenido. Utilizando otras propiedades CSS, como el color, el grosor y el estilo de la línea, puedes personalizar aún más el estilo de tachado para adaptarlo a tus necesidades. Recuerda siempre utilizar las mejores prácticas de diseño web al implementar cualquier efecto visual en tu sitio.

Preguntas frecuentes

¿Puedo aplicar estilos de tachado a diferentes elementos HTML?

Sí, puedes aplicar estilos de tachado a cualquier elemento HTML utilizando la propiedad text-decoration con el valor line-through en la hoja CSS.

¿Puedo personalizar diferentes estilos de tachado en diferentes partes de mi sitio web?

Sí, puedes personalizar diferentes estilos de tachado utilizando las propiedades CSS adecuadas en diferentes partes de tu sitio web.

¿El estilo de tachado afecta al SEO?

No, el uso del estilo de tachado no tiene ningún impacto en el SEO del sitio web, ya que sigue siendo contenido indexable.
[nekopost slugs="sangria-html,imagen-de-fondo-central,establecer-css-de-color-de-fondo-transparente,dar-espacio-entre-dos-enlaces-en-html-css,centro-de-posicion-absoluta-css,archivos-pdf-cambia-chrome-html-fijado,haga-el-primer-personaje-en-mayuscula-en-css,opacidad-de-color-de-fondo-css,no-para-seleccionar-el-primer-nino-css"]