根据我的经验

<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上运行的

将所需的贯穿颜色分配给父元素也适用于删除的文本元素(<del>)—假设客户端将<del>呈现为贯穿颜色。

http://jsfiddle.net/kpowz/vn9RC/

截至2016年2月，CSS 3支持如下所述。下面是一个来自WooCommerce的单品折扣页面的片段

/*Price before discount on single product page*/
body.single-product .price del .amount {
color:           hsl(0, 90%, 65%);
font-size:       15px;
text-decoration: line-through;
/*noinspection CssOverwrittenProperties*/
text-decoration: white double line-through; /* Ignored in CSS1/CSS2 UAs */
}

导致:

css3很可能直接支持使用text-decoration-color属性。特别是:

text-decoration-color CSS属性设置在绘制由text-decoration-line指定的下划线、覆盖线或划除线时使用的颜色。这是为这些文本装饰上色的首选方法，而不是使用其他HTML元素的组合。

请参见css3草案规范中的text-decoration-color。

如果你想立即使用这个方法，你可能必须给它加上前缀，使用-moz-text-decoration-color。(为了向前兼容性，在指定时不带-moz-)。

如果你不关心internet explorer\edge，那么最简单的方法来实现不同的颜色擦除将是使用CSS属性: 文字装饰-色彩配合文字装饰:贯穿;

.yourClass {
    text-decoration: line-through !important;
    text-decoration-color: red !important;
}

—不能与Edge\Internet Explorer一起工作

只是一个更新，这可以很容易地做到现在做:

text-decoration: underline;
text-decoration: underline dotted;
text-decoration: underline dotted red;
text-decoration: green wavy underline;
text-decoration: underline overline #FF3028;

然后用color: ....添加想要的字体颜色

添加一些对我来说不明显的东西，当你把它应用到React内联样式:

<p style= {{textDecoration:'line-through red', color:'gray'}} >

您需要将“-”转换为驼峰情况。

这将呈现....的内容用红线划掉的灰色。

要了解更多细节，请查看这里的文档

Blazemonger的回复(上面或下面)需要投票-但我没有足够的分数。

我想在一些20px宽的CSS圆形按钮上添加一个灰色条来表示“不可用”，并调整了Blazemonger的CSS:

.round_btn:after {
    content:"";    /* required property */
    position: absolute;
    top: 6px;
    left: -1px;
    border-top: 6px solid rgba(170,170,170,0.65);
    height: 6px;
    width: 19px;
}