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

With no extra DOM (but may not work for some layouts for obvious reasons):

<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.

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