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

269

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

<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-ornament: line-through~~

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

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

html css gojomo
источник

Для эффекта прозрачного зачеркивания

web-tiki

409

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

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

Развернуть фрагмент

...или...

<strike style='color:red'>
  <span style='color:black'>black with red strikethrough<span>
</strike>

Развернуть фрагмент

(Однако обратите внимание, что <strike>это считается устаревшим в HTML4 и устаревшим в HTML5 ( см. Также W3.org ). Рекомендуемый подход - использовать, <del>если подразумевается истинное значение удаления, или иным образом использовать <s>элемент или стиль с text-decorationCSS, как в первый пример здесь.)

Чтобы зачеркивание появилось для: hover, <HEAD>должна использоваться явная таблица стилей (объявленная или указанная в ). ( :hoverПсевдокласс не может быть применен со встроенными атрибутами STYLE.) Например:

<head>
  <style>
    a.redStrikeHover:hover {
      color:red;
      text-decoration:line-through;
    }
  </style>
</head>
<body>
  <a href='#' class='redStrikeHover'>
    <span style='color:black'>hover me</span>
  </a>
</body>

Развернуть фрагмент

(IE7, кажется, требует, чтобы некоторые из них hrefбыли установлены <a>до того, как :hoverэто произойдет; браузеры на основе FF и WebKit этого не делают.)

gojomo
источник

8

Так много для моего "это невозможно!" ответ.

Джон Кугельман

1

Реализация Jquery была бы очень полезна.

Якунин

38

@utype Почему бы вам использовать jQuery для этого?

Капа

4

Элементы обертки вроде отстой. В большинстве случаев вы можете добиться практически того же эффекта с помощью простого псевдоэлемента, т.е. del { position:relative }и тогда del::after { content:'', position:absolute; top: 50%; left: 0; right:0; border-bottom: 1px solid #f00 }.

Воплощение

2

Просто обертка. Гениальный. Боже мой, это лучше всего, что я придумал (псевдоэлементы). Прекрасная работа!

CunningFatalist

69

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

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

Также см text-decoration-color В спецификации проекта CSS 3 .

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

Механическая улитка
источник

2

«CSS 3, скорее всего, будет иметь» довольно ... оптимистично.

BoltClock

5

@BoltClock: Как это оптимистично? Он уже находится в рабочем проекте W3C, который активно изучается.

Механическая улитка

2

Согласно caniuse , ни один браузер (в 2014 году) не поддерживает text-decoration-colorбез префиксов.

Blazemonger

4

И через 3 года ... Firefox и Safari имеют его = 20% охвата.

Андре Верланг,

1

согласно caniuse, в настоящее время поддерживается только FireFox

YakovL

35

Я использовал пустой :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>

Развернуть фрагмент

Blazemonger
источник

@Veve HTML зачеркнутый элемент -

несемантическая

1

спасибо, я искал это, особенно линию поворота

hanan-mstudio

Использование метода: after может вызвать проблемы с доступностью

ewanm89

9

Если вы не заботитесь об интернет-обозревателе \ edge, то самым простым способом достижения другого цвета для зачеркивания будет использование свойства CSS: text-decor-color в сочетании с text-ornament: line-through;

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

- не работает с Edge \ Internet Explorer

Рохин Так
источник

7

Этот CSS3 облегчит вам работу со свойством и будет работать нормально.

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

Вишну С.Р.
источник

6

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

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

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

Развернуть фрагмент

ibolmo
источник

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 потом ...)

Simbo
источник

4

Ну вот:

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

Развернуть фрагмент

Евгений Кардаш
источник

3

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

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

не лучший вариант У меня был сотрудник, который использовал этот метод без тестирования кросс-браузер, поэтому мне пришлось вернуться и исправить его, потому что это вызвало проблемы в Firefox. Моя личная рекомендация - использовать селектор: after для создания зачеркивания. Таким образом, он может вернуться к 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

Брэди эдгар
источник

2

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

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

anoldermark
источник

0

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

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

kpowz
источник

-4

Вот пример реализации 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; }

Aximili
источник

Какая часть недействительна? Это работало на всех основных браузерах, хотя

Aximili

3

«Работы» и «действительные» довольно далеко друг от друга. Браузеры пытаются интерпретировать даже HTML, в котором есть несколько ошибок. См W3C Markup Validation Service , Почему действует HTML важно для всех? , HTML действительные атрибуты DIV? на SO

Капа

Если я не ошибаюсь, изменение имени атрибута на «data-special» должно сделать его действительным HTML5.

Muhd

13

jQuery добавить обертку, чтобы получить цветной зачеркнутый? Кем мы стали ?!

Крис Бейкер

3

Похоже на возможную проблему XSS: у вас есть простой текст originalPrice, а затем внедрите его обратно как HTML Попробуйте использовать .html()вместо .text(). Или, может быть, использовать JQuery wrap().

Туомассало

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

Ответы: