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

This question already has answers here: CSS strikethrough different color from text? (15 answers) Closed 8 years ago.

I’d like to have gray text with a red strike-through, but this sty开发者_运维问答le doesn’t work:

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

What am I doing wrong?

---

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

---

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.

---

There is another way of looking at the meaning of the CSS2 specification; and that is the outer text-decoration will set the color of the "line-through" and text, but an inner color declaration (in a 'span' tag) can be used to reset the text color.

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

---

It's not possible to make a line-through with a different color. It will be in the color you define with property color.

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

EDIT:

what came into my mind is to use a background-image with a 1px * 1px color dot in the color you like.

CSS:

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

HTML:

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

---

The CSS2 specs says

The color(s) required for the text decoration must be derived from the 'color' property value of the element on which 'text-decoration' is set. The color of decorations must remain the same even if descendant elements have different 'color' values

I guess that means that you can't do it that way.

A workaround could be using some kind of border, and lifting it?