这个CSS3将使您更容易通过属性线，并工作良好。

span{
    text-decoration: line-through;
    text-decoration-color: red;
}

下面是一种使用渐变来伪造线条的方法。它使用多行换行，不需要额外的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进行计算，然后使用自动修复…)

单一属性解决方案是:

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

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

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

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

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

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

添加到@gojomo，您可以在伪元素之后使用:作为附加元素。唯一需要注意的是，您需要在data-text属性中定义您的innerText，因为CSS的内容函数有限。

年代{ 颜色:红色; text-align: -1000 em; 溢出:隐藏; ｝ s:{后 颜色:黑色; 内容:attr(数据电文); ｝ < s数据电文= "删除线”>删除线< / s >