HTML元素del、strike或s都可以用于文本删除效果。例子:
<del>del</del>
....德尔给:
<strike>strike</strike> and <s>strike</s>
．...给予:罢工和罢工
值为line-through的CSS text-decoration属性也可以类似地使用。代码…
<span style='text-decoration:line-through'>
text-decoration:line-through
</span>
.．.也会渲染成这样:文本装饰:线贯穿
但是，划线通常与文本的颜色相同。
CSS可以用来使线的颜色不同吗?
当前回答
单一属性解决方案是:
.className {
text-decoration: line-through red;
};
通过属性定义线条后的颜色。
其他回答
根据我的经验
<span style='color:red;text-decoration:line-through'>
<span style='color:black'>black with red strikethrough</span>
</span>
不是最好的选择。我有一个同事在没有测试跨浏览器的情况下使用了这个方法，所以我不得不回去修复它，因为它在firefox中引起了问题。我个人的建议是使用:after选择器来创建擦除线。这样它就可以回到IE8，如果你真的想，没有任何风格冲突，以及在所有其他浏览器坚实。
它还创建了更少的标记和大致相同的样式，在我看来这是一个相当大的问题。
所以如果其他人遇到类似的问题，希望这能帮助他们:
.lineThrough {
position: relative;
&:after {
content: " ";
display: block;
width: 60px;
height: 1px;
background: red;
position: absolute;
top: 49%;
left: 50%;
margin-left: -30px;
}
}
显然，你可以使用transform: translate来代替margin，但是这个例子是在IE8上运行的
添加到@gojomo，您可以在伪元素之后使用:作为附加元素。唯一需要注意的是，您需要在data-text属性中定义您的innerText，因为CSS的内容函数有限。
年代{ 颜色:红色; text-align: -1000 em; 溢出:隐藏; ｝ s:{后 颜色:黑色; 内容:attr(数据电文); ｝ < s数据电文= "删除线”>删除线< / s >
如果你不关心internet explorer\edge，那么最简单的方法来实现不同的颜色擦除将是使用CSS属性: 文字装饰-色彩配合文字装饰:贯穿;
.yourClass {
text-decoration: line-through !important;
text-decoration-color: red !important;
}
—不能与Edge\Internet Explorer一起工作
如果它能帮助别人，你可以使用css属性
text-decoration-color:红色;
是的，通过添加额外的包装元素。为外部元素指定所需的贯穿线颜色，然后将所需的文本颜色分配给内部元素。例如:
< span风格= '颜色:红色;文字修饰:线穿过的> <span style='color:黑色'>黑色加红色擦除线</span> < / span >
…或… <罢工风格= '颜色:红色' > <span style='color:黑色'>黑色加红色擦除线<span> > < /罢工
(但是请注意，<strike>在HTML4中被认为已弃用，在HTML5中已过时(参见W3.org)。推荐的方法是使用<del>如果删除的真正含义是，或者使用<s>元素或样式与文本装饰CSS在这里的第一个例子。)
To make the strikethrough appear for a:hover, an explicit stylesheet (declared or referenced in <HEAD>) must be used. (The :hover pseudo-class can't be applied with inline STYLE attributes.) For example: <head> <style> a.redStrikeHover:hover { color:red; text-decoration:line-through; } </style> </head> <body> <a href='#' class='redStrikeHover'> <span style='color:black'>hover me</span> </a> </body> (IE7 seems to require some href be set on the <a> before :hover has an effect; FF and WebKit-based browsers do not.)
