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

Ответ 1

Да, добавив дополнительный элемент упаковки. Назначьте желаемый штриховой цвет внешнему элементу, затем желаемый цвет текста для внутреннего элемента. Например:

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

Ответ 2

По состоянию на февраль 2016 года, 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. В частности:

Свойство CSS text-decoration-color устанавливает цвет, используемый при рисовании подчеркиваний, надстроек или пропусков, указанных в text-decoration-line. Это предпочтительный способ окраски этих текстовых украшений, а не использование комбинаций других элементов HTML.

Также см. text-decoration-color в спецификации CSS 3.

Если вы хотите немедленно использовать этот метод, вам, вероятно, придется его префикс, используя -moz-text-decoration-color. (Также укажите его без -moz-, для прямой совместимости.)

Ответ 3

Я использовал пустой элемент :after и украсил на нем одну рамку. Вы можете даже использовать преобразования 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>

Ответ 4

Добавив в @gojomo, вы можете использовать псевдо-элемент :after для дополнительного элемента. Единственное предостережение в том, что вам нужно определить свой innerText в атрибуте data-text, поскольку CSS имеет ограниченные функции 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>

Ответ 5

Здесь используется подход, который использует градиент для подделки линии. Он работает с многострочными ударами и не нуждается в дополнительных элементах 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...)

Ответ 6

Ответ Blazemonger (выше или ниже) требует голосования - но у меня недостаточно очков.

Я хотел добавить серый бар через 20-кратные широкие круговые кнопки 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;
}

Ответ 7

По моему опыту

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

не самый лучший вариант. У меня был сотрудник, использующий этот метод без тестирования кросс-браузера, поэтому мне пришлось вернуться и исправить его, потому что это вызвало проблемы в firefox. Моя личная рекомендация заключалась в том, чтобы использовать: после селектора для создания зачеркивания. Таким образом, он может вернуться в IE8, если вы действительно хотите без конфликтов стиля, а также со всеми другими браузерами.

Он также создает меньше разметки и примерно такое же количество стилей, что, на мой взгляд, довольно большое дело.

Итак, если кто-то еще сталкивается с подобными проблемами, надеюсь, это может помочь:

.lineThrough {
    position: relative;

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

Очевидно, вы могли бы использовать transform: translate вместо полей, но этот пример должен вернуться к IE8

Ответ 8

Здесь вы идете:

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

Ответ 9

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

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

Ответ 10

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