CSS删除与文本不同的颜色？
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>
…也会呈现为： text-decoration：line-through
但是，删除线通常与文本颜色相同。
CSS可以用来使行不同的颜色？
是的，通过添加一个额外的包装元素。 将所需的直通颜色指定给外部元素，然后将所需的文本颜色指定给内部元素。 例如：
<span style='color:red;text-decoration:line-through'> <span style='color:black'>black with red strikethrough</span> </span>
截至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 */ }
导致： 
CSS 3可能会使用text-decoration-color属性直接支持。 尤其是：
text-decoration-colorCSS属性设置在绘制text-decoration-line指定的下划线，上划线或走向时使用的颜色。 这是对这些文本装饰进行着色的首选方式，而不是使用其他HTML元素的组合。
另请参阅CSS 3草稿规范中的text-decoration-color 。
如果您想立即使用此方法，则可能必须使用-moz-text-decoration-color作为其前缀。 （为了向前兼容，也可以在-moz-指定它。）
我已经使用了一个空的元素，并在它上面装饰了一个边框。 您甚至可以使用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>
添加到@gojomo你可以使用:after添加元素:after伪元素。 唯一需要注意的是，因为CSS的content函数有限，所以需要在data-text属性中定义innerText 。
CSS
<style> s { color: red; text-align: -1000em; overflow: hidden; } s:after { color: black; content: attr(data-text); } </style>
HTML
<s data-text="Strikethrough">Strikethrough</s>
这是一种使用渐变来伪造线条的方法。 它适用于多行的罢工，不需要额外的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; }
看小提琴： http : //jsfiddle.net/YSvaY/
渐变色块和背景大小取决于行高。 （之后我使用LESS进行计算，然后使用Autoprefixer）
Blazemonger的回复（高于或低于）需要投票 – 但我没有足够的分数。
我想在一些20px宽的CSS圆形button上添加一个灰色条来表示“不可用”，并调整了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; }
在我的经验中
<span style='color:red;text-decoration:line-through'> <span style='color:black'>black with red strikethrough</span> </span>
不是最好的select。 我有一个同事使用这个方法没有testing跨浏览器，所以我不得不回去修复它，因为它在Firefox中造成问题。 我个人的build议是使用：afterselect器来创build删除线。 这样，如果你真的想在没有任何样式冲突的情况下以及在所有其他浏览器中保持稳定，它可以回到IE8。
它也创造较less的标记和大约相同数量的样式在我看来是一个相当大的交易。
所以，如果有人遇到类似的问题，希望这可以帮助：
.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>呈现为直通。
干得好：
<style>body {color: #000;}</style> <del> <span style="color:#999">facebook</span> </del>
这里是一个jQuery的实现示例 – 感谢gojomo的回答和utype的build议（两者都是+1）
$(function(){ //=================================================================== // Special price strike-out text // Usage: // Normally: <span class='price'>$59</span> // On special: <span class='price' special='$29'>$59</span> //=================================================================== $(".price[special]").each(function() { var originalPrice = $(this).text(); $(this).html('<strike><span>' + originalPrice +'</span></strike> ' + $(this).attr('special')) .removeAttr('special') .addClass('special'); }); });
CSS可以是
.price strike, .price.special { color: Red; } .price strike span { color: Black; }
