CSS:使用与文本颜色不同的颜色的直线？

Question

我想要带有红色穿透的灰色文字,但这种风格不起作用:

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

我究竟做错了什么？

Answer 1

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

<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

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>

这里有一个例子.