CSS: pasada de línea con un color diferente del color del texto?

Question

me gustaría tener texto gris con un tachado en rojo, pero este estilo no funciona:

color: #a0a0a0; 
text-decoration: line-through 3px red; 

¿Qué estoy haciendo mal?

Answer 1

puede simular el efecto deseado con dos elementos anidados, por ejemplo:

<style type="text/css"> 
    span.inner { 
     color: green; 
    } 
    span.outer { 
     color: red; 
     text-decoration: line-through; 
    } 
</style> 

<span class="outer"> 
    <span class="inner">foo bar</span> 
</span> 

jsfiddle

Answer 2

No es posible hacer una línea con un color diferente. Será en el color que defina con la propiedad color.

ver http://www.w3.org/TR/CSS2/text.html#lining-striking-props

EDITAR:

lo que vino a la mente es el uso de una imagen de fondo con un punto de color * 1px 1px en el color que desee.

CSS:

.fakeLineThrough { 
    background-image: url(lineThroughDot.gif); 
    background-repeat: repeat-x; 
    background-position: center left; 
} 

HTML:

<span class="fakeLineThrough">the text</span> 

Answer 3

Las especificaciones CSS2 dice

Los colores requeridos para la decoración del texto se deben derivar del valor de la propiedad 'color' del elemento sobre el que se establece 'text-decoration'. El color de las decoraciones debe permanecer igual incluso si los elementos descendientes tienen diferentes valores de "color"

Supongo que eso significa que no puede hacerlo de esa manera.

Una solución alternativa podría ser utilizar algún tipo de borde y levantarlo?

Answer 4

Hay otra forma de ver el significado de la especificación CSS2; y esa es la decoración de texto externa configurará el color de la "línea en línea" y el texto, pero se puede usar una declaración de color interna (en una etiqueta de "extensión") para restablecer el color del texto.

<p style="text-decoration:line-through;color:red"> 
<span style="color:#000"> 
The "line-through" and "color" are declared in 'p', and the inner 'span' 
declares the correct color for the text. 
</span> 
</p> 

Answer 5

Sin DOM extra (pero puede no funcionar para algunos diseños por razones obvias):

<style type="text/css"> 
    .strikethrough { 
     position: relative; 
    } 

    .strikethrough:before { 
     border-bottom: 1px solid red; 
     position: absolute; 
     content: ""; 
     width: 100%; 
     height: 50%; 
    } 
</style> 

<span class="strikethrough">Foo Bar</span> 

A jsfiddle example here.