Html CSS：颜色与文本颜色不同的线条？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4364263/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS: Line-through with a color different from the text color?
提问by Tony the Pony
I'd like to have gray text with a red strike-through, but this style doesn't work:
我想要带有红色删除线的灰色文本，但这种样式不起作用：
color: #a0a0a0;
text-decoration: line-through 3px red;
What am I doing wrong?
我究竟做错了什么？
回答by Benjamin Wohlwend
回答by Alexander Pavlov
With no extra DOM (but may not work for some layouts for obvious reasons):
没有额外的 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>
回答by G B Carlson
There is another way of looking at the meaning of the CSS2 specification; and that is the outer text-decoration will set the color of the "line-through" and text, but an inner color declaration (in a 'span' tag) can be used to reset the text color.
还有另一种方式来看待 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>
回答by thedom
It's not possible to make a line-through with a different color. It will be in the color you define with property color.
不可能用不同的颜色制作线条。它将采用您使用 property 定义的颜色color。
see http://www.w3.org/TR/CSS2/text.html#lining-striking-props
见http://www.w3.org/TR/CSS2/text.html#lining-striking-props
EDIT:
编辑：
what came into my mind is to use a background-image with a 1px * 1px color dot in the color you like.
我想到的是使用带有 1px * 1px 颜色点的背景图像以您喜欢的颜色。
CSS:
CSS：
.fakeLineThrough {
background-image: url(lineThroughDot.gif);
background-repeat: repeat-x;
background-position: center left;
}
HTML:
HTML：
<span class="fakeLineThrough">the text</span>
回答by Christian Watteng?rd
The CSS2 specs says
CSS2 规范说
The color(s) required for the text decoration must be derived from the 'color' property value of the element on which 'text-decoration' is set. The color of decorations must remain the same even if descendant elements have different 'color' values
文本装饰所需的颜色必须从设置了 'text-decoration' 的元素的 'color' 属性值派生而来。即使后代元素具有不同的“颜色”值，装饰的颜色也必须保持不变
I guess that means that you can't do it that way.
我想这意味着你不能那样做。
A workaround could be using some kind of border, and lifting it?
解决方法可能是使用某种边框并解除它？
