27

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

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

我究竟做错了什么？

4

5 回答 5

76

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

        span.inner {
            color: green;
        }
        span.outer {
            color: red;
            text-decoration: line-through;
        }
<span class="outer">
    <span class="inner">foo bar</span>
</span>

jsfiddle

于 2010-12-06T08:00:37.023 回答
21

没有额外的 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 示例。

于 2013-03-19T12:40:14.503 回答
4

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

<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>
于 2011-12-27T19:24:35.383 回答
3

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

见http://www.w3.org/TR/CSS2/text.html#lining-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>
于 2010-12-06T07:58:52.447 回答
1

CSS2 规范说

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

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

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

于 2010-12-06T08:01:31.947 回答