Tachar texto con CSS

27/Oct/2007 CSS , 5 Comentarios

En las primeras versiones del lenguaje HTML existían las etiquetas strike y s, las cuales nos permitían tachar texto dentro de nuestra página web. Ahora es el lenguaje CSS el que nos permite tachar texto.

Para tachar texto con CSS nos tenemos que basar en la propiedad text-decoration y en el valor line-through. En primer lugar definiremos el estilo que va a representar el texto tachado. Para ello utilizamos la etiqueta HTML <STYLE> dentro de la cabecera de la página HTML. Dentro insertaremos el código CSS.

  1.  
  2. <style type="text/css">
  3. .tachado{text-decoration:line-through;}
  4. </style>

Ahora solo nos quedará el aplicar el estilo "tachado" a un elemento de la página HTML. En nuestro caso vamos a hacerlo sobre un elemento <P>. Para ello nos basamos en la propiedad class, indicando el valor del estilo.

  1. <p class="tachado">Este es un esto al que le hemos aplicado el texto tachado, y que por lo tanto va a aparecer tachado. </p>

Y de esta sencilla forma hemos conseguido tachar texto con CSS.

Vídeos sobre CSS


Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D

5 comentarios en “Tachar texto con CSS”

Víctor Cuervo

Víctor Cuervo

@Jose Carlos,

Pues sí, puede ser que en el Internet Explorer 6 no funcione. Lo raro es el tema del Chrome. Muchas gracias por compartir tu comentario y experiencia con nosotros. Creo que son muy enriquecedoras para el resto de visitantes.

Víctor Cuervo

José Carlos

Hola, yo pensaba que funcionaba en todos, pero un cliente me reportó que su página no se veía bien, es una tienda online de ropa donde la talla agotada debía aparecer tachada, para ello hice una clase .outoofstock{text-decoration:line-through;} y en FireFox sin problemas, pero al revisar en otros navegadores observé que IE6 efectivamente no tachaba el texto, busqué en los foros y al parecer ha habido problemas con esto en el pasado.

La movida es que mi cliente me insistía en que con Chrome tampoco le aparecía el texto tachado, finalmente se optó por añadir una nota [agotado].

Saludos y gracias por tu interés.

Víctor Cuervo

Víctor Cuervo

@José Carlos,

En qué navegador no te ha funcionado?

Acabo de probar en:
* Chrome 11
* Firefox 3.6
* Opera 11
* Safari 4
* Internet Explorer 8

Y funciona en todos correctamente. 🙂

Víctor Cuervo

José Carlos

No funciona en todos los navegadores

Víctor Cuervo

juanmanuel lopez

gracias!

Los comentarios están cerrados.