CSS：穿线颜色与文本颜色不同？

Question

我想要带有红色删除线的灰色文本，但这种样式不起作用：

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

我做错了什么？

Answer 1

您可以使用两个嵌套元素来模拟所需的效果，例如：

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

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

jsfiddle

Answer 2

没有额外的 DOM（但由于明显的原因可能不适用于某些布局）：

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

这里有一个 jsfiddle 示例。

Answer 3

还有另一种方式来看待 CSS2 规范的含义；也就是说，外部文本装饰将设置“line-through”和文本的颜色，但内部颜色声明（在“span”标签中）可用于重置文本颜色。

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

不可能用不同的颜色进行穿线。它将采用您使用属性 color 定义的颜色。

请参阅http://www.w3.org/TR/CSS2/ text.html#lined-striking-props

编辑：

我想到的是使用带有您喜欢的颜色的 1px * 1px 颜色点的背景图像。

CSS：

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

HTML：

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

Answer 5

CSS2 规范说

文本装饰所需的颜色必须源自设置了“text-decoration”的元素的“color”属性值。即使后代元素具有不同的“颜色”值，装饰的颜色也必须保持相同

我想这意味着你不能这样做。

解决方法可能是使用某种边框并解除它？