CSS зачеркивает другой цвет от текста?

Question

Элементы HTML del, strike или s могут быть использованы для эффекта зачеркивания текста. Примеры:

<del>del</del>

.... дает: del

<strike>strike</strike> and <s>strike</s>

.... дает: удар и удар

Свойство CSS text-decoration со значением line-through может использоваться аналогично. Код ...

<span style='text-decoration:line-through'>
    text-decoration:line-through
</span>

... также будет выглядеть следующим образом: text-decor: line-through

Однако зачеркнутая линия обычно того же цвета, что и текст.

Можно ли использовать CSS, чтобы сделать линию другим цветом?

Answer 1

Присвоение желаемого сквозного цвета родительскому элементу также работает для удаленного текстового элемента (<del>) - при этом предполагается, что клиент отображает <del> как сквозной.

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

Answer 2

Вот пример реализации jQuery & ndash; благодаря ответу годжомо и предложению utype (+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; }