Hoy os traigo un post en el que os explicaré la forma de poder añadir el típico texto tachado mediante HTML y también mediante CSS, ya que ambos lenguajes nos permiten hacerlo, cada uno a su manera.
Con texto tachado me refiero a un texto común que tiene una ralla que atraviesa las letras, ya sabes, se suele usar para indicar que esa cosa es incorrecta o que ya no es válida… Por si no quedase 100% claro a lo que me refiero (que por escrito a veces es complicado explicar algunas cosas), sería un texto como el siguiente:
¡Consulta nuestros servicios!
Hola, soy un texto tachado
Ya te adelanto que lograr este tipo de texto es increíblemente sencillo tanto en HTML como en CSS, por lo que el post de hoy va a ser algo menos denso de lo habitual (para bien o para mal). Así que nada, comencemos viendo cómo podemos tachar textos mediante HTML y recuerda que un poco más abajo también te diré cómo puedes lograrlo con CSS. A mí me parece más cómodo el método de HTML, pero por supuesto todo dependerá un poco de tus gustos y de las necesidades de tu página. No me enrollo más, ¡vamos allá!
Tabla de Contenidos
Crear Texto Tachado en HTML: <s>
Crear nuestro texto tachado con HTML es tan sencillo como usar la etiqueta <s>, esta etiqueta cuenta con una etiqueta de apertura «<s>» y de cierre «</s>» como ocurre con muchísimas otras etiquetas de HTML.
Como dato, que sepas que antiguamente se usaba la etiqueta <strike> para hacer esto, pero esta ha quedado obsoleta, ¡por lo que deberías usar <s> en su lugar! Si todavía estás usando <strike> sería buena idea ir pasando a la nueva etiqueta porque poco a poco los navegadores dejarán de «entenderla».
Volviendo al tema, te dejo un par de ejemplos de cómo se usaría la etiqueta <s>:
<s>¡Hola! Soy un texto tachado con HTML</s>
¡Hola! Soy un texto tachado con HTML
Y por supuesto, como es habitual en HTML, puedes usarlo de modo en el que por ejemplo dentro de un mismo párrafo, quieras tachar solo una parte concreta del mismo.
<p>Hola, soy un párrafo con <s>cierta parte tachada</s></p>
Hola, soy un párrafo con cierta parte tachada
Como te comentaba, ¡no tiene ningún misterio! Eso sí, ojo porque hay otra etiqueta que nos permite hacer esto, pero ahora te explico.
<del> e <ins>
<del> es la etiqueta que comentaba que también nos permite tachar el texto, sin embargo, debes tener cuidado ya que si bien es cierto que el efecto que conseguirás es exactamente el mismo que con <s>, dependiendo de qué quieras hacer exactamente será más correcto semánticamente usar una u otra.
<s> es para cuando quieres tachar un texto, sin más; mientras que <del> debes usarlo junto con la etiqueta <ins> con el objetivo de crear una corrección. Es decir, que usarás <del> e <ins> cuando quieras hacer lo típico de tachar un texto y justo a su lado poner la corrección. Ahora lo vemos en un ejemplo:
<p><del>Este año iré al gimnasio</del> <ins>El próximo año iré al gimnasio</ins></p>
Este año iré al gimnasio El próximo año iré al gimnasio
Como ves, al usar <ins> el navegador (no sé si quizás alguno suelto no) le añade un «text-decoration: underline» al texto, pero tú por supuesto podrías personalizarlo como quieras mediante CSS.
Crear Texto Tachado con CSS
Seguimos ahora con la forma de conseguir el efecto de texto tachado mediante CSS, ¡usa el método que te venga mejor o el que más te guste! En CSS también es muy sencillo conseguirlo, simplemente tenemos que usar «text-decoration: line-through».
.texto-tachado {
text-decoration: line-through;
}
Esta es una clase de ejemplo, ¡usa el selector que prefieras! En este caso lo aplicaríamos así:
<p>Soy un texto tachado, <span class="texto-tachado">pero mediante CSS</span></p>
Soy un texto tachado, pero mediante CSS
Como puedes comprobar, el efecto es exactamente el mismo que al usar <s> o <del>.
Cómo Cambiar el Color de la Línea que Tacha
Para terminar os dejo por aquí un truquito bastante interesante que nos permitirá cambiar el color de la línea que tacha el texto. Me refiero por supuesto a que únicamente la línea como tal sea la que cambie de color y el texto se mantenga de otro color, algo que mediante el procedimiento habitual de usar la orden «color» no funciona ya que esto pintará tanto el texto como la línea.
Te muestro primero el CSS:
.tachado-azul {
text-decoration: line-through;
color: #0CFFF4; /* Un azul neón que uso muy a menudo, pero elige el color que quieras */
}
.color-texto {
color: white;
}
Y ahora el HTML, que en este caso es donde está la «chicha»:
<p>
<span class="tachado-azul">
<span class="color-texto">Soy un </span>
</span>
</p>
¡Soy un texto con la línea tachada de color azul!
En rojo, que sería más habitual, quedaría así. No paso el código porque es lo mismo pero cambiando el color de la línea a rojo y ya.
¡Soy un texto con la línea tachada de color rojo!
La lógica detrás de que esto sea posible es que estamos creando en primer lugar la línea que cruza el texto con el color que elegimos, y luego aplicamos el color al texto por separado. Al hacer esto, no entran en conflicto y conseguimos el efecto deseado: una línea de un color (el color de la línea tachada) y el texto en otro color (el color del texto).
Y nada, ¡eso sería todo por el día de hoy! Espero que me haya explicado bien y como siempre, ya sabéis, cualquier duda podéis dejarme un comentario un poco más abajo. También si queréis que haga contenido de algún tema en concreto y si veo que es algo que domino y que puede llegar a ser interesante de cara a nuevo contenido, seguramente lo haré. ¡Hasta la próxima!
Más información aquí.
Otros Posts que Pueden Interesarte:
- La Diferencia entre <strong> y <b> en HTML y SEO
- Cómo Quitar el Punto y Crear Listas Elegantes en CSS
- Cómo Modificar el Espacio entre Letras en CSS
- Cómo Crear Transparencias y Opacidad con CSS
- Cómo Convertir Texto en Mayúsculas o Minúsculas en CSS
- Cómo Dominar el Display Grid en CSS
- Cómo Personalizar los HR con CSS
