我使用了一个空的:after元素，并在它上面装饰了一个边框。您甚至可以使用CSS转换来旋转斜线。结果:纯CSS，没有额外的HTML元素!缺点:不跨多行换行，尽管在我看来，你不应该在大块文本上使用擦除线。

s, strike { text-decoration: none; /*we're replacing the default line-through*/ position: relative; display: inline-block; /* keeps it from wrapping across multiple lines */ } s:after, strike:after { content: ""; /* required property */ position: absolute; bottom: 0; left: 0; border-top: 2px solid red; height: 45%; /* adjust as necessary, depending on line thickness */ /* or use calc() if you don't need to support IE8: */ height: calc(50% - 1px); /* 1px = half the line thickness */ width: 100%; transform: rotateZ(-4deg); } <p>Here comes some <strike>strike-through</strike> text!</p>

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

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

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

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

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

我使用了一个空的:after元素，并在它上面装饰了一个边框。您甚至可以使用CSS转换来旋转斜线。结果:纯CSS，没有额外的HTML元素!缺点:不跨多行换行，尽管在我看来，你不应该在大块文本上使用擦除线。

s, strike { text-decoration: none; /*we're replacing the default line-through*/ position: relative; display: inline-block; /* keeps it from wrapping across multiple lines */ } s:after, strike:after { content: ""; /* required property */ position: absolute; bottom: 0; left: 0; border-top: 2px solid red; height: 45%; /* adjust as necessary, depending on line thickness */ /* or use calc() if you don't need to support IE8: */ height: calc(50% - 1px); /* 1px = half the line thickness */ width: 100%; transform: rotateZ(-4deg); } <p>Here comes some <strike>strike-through</strike> text!</p>

给你:

<style>身体 {颜色： #000;}</style> <del>&nbsp;&nbsp;<span style=“color：#999”>facebook</span>&nbsp;&nbsp;</del>

根据我的经验

<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:红色;