Como mostrar texto TACHADO en HTML

Como mostrar texto TACHADO en HTML

Como mostrar texto TACHADO en HTML

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.

Tags:,

Escribe un comentario