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

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

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

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'}} >

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

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

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

下面是一种使用渐变来伪造线条的方法。它使用多行换行，不需要额外的DOM元素。但由于它是背景渐变，所以它在文本后面……

del, strike {
  text-decoration: none;
  line-height: 1.4;
  background-image: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.63em, transparent), color-stop(0.63em, #ff0000), color-stop(0.7em, #ff0000), color-stop(0.7em, transparent), to(transparent));
  background-image: -webkit-linear-gradient(top, transparent 0em, transparent 0.63em, #ff0000 0.63em, #ff0000 0.7em, transparent 0.7em, transparent 1.4em);
  background-image: -o-linear-gradient(top, transparent 0em, transparent 0.63em, #ff0000 0.63em, #ff0000 0.7em, transparent 0.7em, transparent 1.4em);
  background-image: linear-gradient(to bottom, transparent 0em, transparent 0.63em, #ff0000 0.63em, #ff0000 0.7em, transparent 0.7em, transparent 1.4em);
  -webkit-background-size: 1.4em 1.4em;
  background-size: 1.4em 1.4em;
  background-repeat: repeat;
}

参见fiddle: http://jsfiddle.net/YSvaY/

渐变色位和背景大小取决于行高。(我使用LESS进行计算，然后使用自动修复…)

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

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

根据我的经验

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

如果它能帮助别人，你可以使用css属性

text-decoration-color:红色;