CSS删除线与文本的颜色不同？

为父元素分配所需的直通颜色也适用于已删除的文本元素（<del>）-假定客户端将其呈现<del>为直通。

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

这是一种使用渐变伪造线条的方法。它适用于多行罢工，不需要其他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 ...）

干得好：

<style>body {color: #000;}</style>
<del>&nbsp;&nbsp;<span style="color:#999">facebook</span>&nbsp;&nbsp;</del>

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

截至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属性设置绘制下划线，overlines时，或删除线由指定使用的颜色text-decoration-line。这是为这些文本装饰着色的首选方法，而不是使用其他HTML元素的组合。

另请参阅text-decoration-colorCSS 3规范草案。

如果您想立即使用此方法，则可能必须使用为其添加前缀-moz-text-decoration-color。（也指定不带-moz-，以实现向前兼容性。）

如果您不关心Internet Explorer \ edge，则实现删除线不同颜色的最简单方法是使用CSS属性： text-decoration-color和text-decoration：line-through;一起使用。

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

-不适用于Edge \ Internet Explorer

此CSS3将使您更轻松地遍历属性，并且工作正常。

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

添加到@gojomo中，您可以将:after伪元素用作其他元素。唯一需要注意的是，由于CSS的功能有限，因此您需要innerText在data-text属性中定义您的属性content。

s {
  color: red;
  text-align: -1000em;
  overflow: hidden;
}
s:after {
  color: black;
  content: attr(data-text);
}

<s data-text="Strikethrough">Strikethrough</s>