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>

A jsfiddle example here.

Answer 3

不可能使用不同颜色制作直线。它将使用属性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>

Answer 4

还有另一种看待CSS2规范含义的方法;这就是外部文本装饰将设置“直通”和文本的颜色，但内部颜色声明（在'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 5

CSS2规范说

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

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

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

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

5 个答案: