CSS: Line-through with a color different from the text color?

Question

I’d like to have gray text with a red strike-through, but this style doesn’t work:

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

What am I doing wrong?

Answer 1

You can simulate the desired effect with two nested elements, e.g.:

        span.inner {
            color: green;
        }
        span.outer {
            color: red;
            text-decoration: line-through;
        }

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

jsfiddle