CSS从文本中删除了不同的颜色？

截至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-为了向前兼容,也请指定它.)

我使用了一个空:after元素并在其上装饰了一个边框.您甚至可以使用CSS变换将其旋转为斜线.结果:纯CSS,没有额外的HTML元素!下行:不包括多行,尽管IMO你不应该在大块文本上使用删除线.

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

Here comes some strike-through text!

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

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

Strikethrough

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

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