CSS tachado color diferente del texto?

A partir de febrero. 2016, CSS 3 tiene el soporte mencionado a continuación. Aquí hay un fragmento de la página de un solo producto de WooCommerce con descuento de precio

/*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 */
}

, Resultando en:

CSS 3 probablemente tendrá soporte directo usando el text-decoration-color propiedad . En particular:

La propiedad CSS text-decoration-color establece el color utilizado cuando se dibujan subrayados, líneas excesivas o tachaduras especificadas por text-decoration-line. Esta es la forma preferida de colorear estos textos decoraciones, en lugar de usar combinaciones de otros elementos HTML.

Véase tambiéntext-decoration-color en el CSS 3 borrador spec .

Si desea usar este método inmediatamente, probablemente tenga que ponerle un prefijo, usando -moz-text-decoration-color. (También especifíquelo sin -moz-, para la compatibilidad hacia adelante.)

He utilizado un elemento :after vacío y decorado un borde en él. Incluso puede usar transformaciones CSS para rotarlo para una línea inclinada. Resultado: CSS puro, sin elementos HTML adicionales! Inconveniente: no se ajusta a través de múltiples líneas, aunque IMO no debe usar tachado en grandes bloques de texto de todos modos.

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>

Añadiendo a @gojomo podrías usar :after pseudo elemento para el elemento adicional. La única advertencia es que necesitará definir su innerText en un atributo data-text ya que CSS tiene funciones limitadas content.

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>

Aquí hay un enfoque que utiliza un gradiente para falsificar la línea. Funciona con ataques multilínea y no necesita elementos DOM adicionales. Pero como es un degradado de fondo, está detrás del texto...

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

Ver violín: http://jsfiddle.net/YSvaY/

Las paradas de color degradadas y el tamaño del fondo dependen de la altura de la línea. (Utilicé MENOS para el cálculo y el Autoprefixer después...)

Aquí tienes:

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

La respuesta de Blazemonger (arriba o abajo) necesita ser votada - pero no tengo suficientes puntos.

Quería agregar una barra gris a través de algunos botones redondos CSS de 20px para indicar "no disponible"y ajustar el css de Blazemonger:

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

En mi experiencia el

<span style='color:red;text-decoration:line-through'>
    <span style='color:black'>black with red strikethrough</span>
</span>

No es la mejor opción. Hice que un compañero de trabajo use este método sin probar el navegador cruzado, así que tuve que volver y arreglarlo porque causó problemas en Firefox. Mi recomendación personal sería utilizar el selector: after para crear un tachado. De esa manera se puede volver a IE8 si realmente quería sin ningún tipo de conflictos de estilo, así como sólido a través de todos los demás navegadores.

También crea menos marcado y aproximadamente la misma cantidad de estilo lo que en mi opinión es un gran problema.

Así que si alguien más se encuentra con problemas similares espero que esto pueda ayudar:

.lineThrough {
    position: relative;

   &:after {
      content: "  ";
      display: block;
      width: 60px;
      height: 1px;
      background: red;
      position: absolute;
      top: 49%;
      left: 50%;
      margin-left: -30px;
   }
}

Obviamente podrías usar transform: translate en lugar de margins, pero este ejemplo es trabajar de nuevo a IE8

Asignar el color de paso de línea deseado a un elemento padre también funciona para el elemento de texto eliminado (<del>), haciendo la suposición que el cliente renderiza <del> como un paso de línea.

Http://jsfiddle.net/kpowz/vn9RC /

Si no le importa Internet explorer\edge, entonces la forma más simple de lograr un color diferente para strike-through sería usar la propiedad CSS: text-decoration-color en conjunto con text-decoration: line-through;

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

} No funciona con Edge \ Internet Explorer

Aquí hay un ejemplo de implementación de jQuery-gracias a la respuesta de gojomo y la sugerencia de utype (+1 para ambos)

$(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');
  });
});

El CSS para eso podría ser

.price strike, .price.special { color: Red; }
.price strike span { color: Black; }