A veces necesitamos actualizar un texto de nuestra página web pero informando al usuario del cambio.
Por ejemplo, cuando un producto de nuestra tienda online ha cambiado de precio y queremos que el usuario vea el actual y el anterior.
Para crear un texto tachado en HTML utilizamos la etiqueta <strike>.
A continuación podemos ver un ejemplo de texto tachado:
¡Compra la camiseta por solo 30€ 25€!
<p>¡Compra la camiseta por solo <strike>30€</strike> 25€!</p>
De esta forma dejamos claro al usuario que se encuentra en rebajas. Pero cuidado si utilizas HTML 5 ya que esta etiqueta no es compatible. En este caso debes utilizar tanto <del> como <s>. Ambas etiquetas nos sirven para mostrar un texto tachado en HTML:
¡Compra la camiseta por solo 30€ 25€!
<p>¡Compra la camiseta por solo <del>30€</del> 25€!</p>
¡Compra la camiseta por solo 30€ 25€!
<p>¡Compra la camiseta por solo <s>30€</s> 25€!</p>
Estas eran las formas más habituales pero con las continuas actualizaciones de CSS podemos imitar este efectos utilizando el siguiente selector: «text-decoration: line-through«.
Esta hace exactamente lo mismo y nuestro código quedará más claro y accesible por la mayoría de páginas web.