Tony the Pony Tony the Pony - 6 months ago 18
HTML Question

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

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

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

<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