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

用不同的颜色制作线条是不可能的。它将以您使用属性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 3

的CSS2规格说

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

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

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

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

，没有额外的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.