Tachado de diferente color que la fuente del texto

Con este sencillo ejemplo vamos a conseguir que el color del tachado sea de diferente color que el de la fuente del texto. Solo vamos a hacer uso de css y html.

El código css sería:

.tachado_rojo{color:#f00;text-decoration:line-through;} .tachado_rojo span{color:#000;}

Con este ejemplo conseguiríamos que el color de la fuente fuese negro y el tachado de color rojo.

Escribimos lo siguiente donde queremos que aparezca:

<div class="tachado_rojo"><span>Texto negro tachado con color rojo</span></div>

El texto 'Texto negro tachado con color rojo' aparecerá tachado de color rojo.

Compártelo

También te puede interesar...

Reseteando CSS
Problema con listas en ie6
Easy Tooltip
Loader de Imagenes / Como indicar que una imagen se esta cargando
Tutorial css Sobre Fuentes para Principiantes
Evitar problemas con Internet explorer 8 emulando el 7
Resolver Problemas de Estándares de Internet Explorer
Gradiente lineal

Comentarios

anfer - 01/11/2008 09:27:23

No sabia que se podía hacer. Gracias!
berumen21 - 01/11/2008 23:42:27

oye trate de implementar tu código pero cuando lo escribi dentro un parrafo el texto tachado me queda en una linea aparte...ejemplo:

texto sin utilizar la clase de css:

este es un texto de ejemplo

pero con la clase me queda asi:

este es

un texto

de ejemplo

me podrias decir como solucionarlo, porque no he podido. gracias
jonseg - 02/11/2008 03:10:17

Hola, el problema es que los div insertan un salto de linea al principio y al final. Para solucionarlo podrías hacer algo como:

p{display:inline;} .tachado_rojo{color:#f00;text-decoration:line-through;display:inline;} .tachado_rojo span{color:#000;}

El código html:

<p>Este es <div class="tachado_rojo"><span>un texto</span></div> de ejemplo</p>
berumen21 - 03/11/2008 09:46:10

muchas gracias funciona perfecto. =)