CSS викреслює різний колір тексту?

268

HTML - елементи del, strikeабо sможуть бути використані для тексту закреслено ефекту. Приклади:

<del>del</del>

.... дає: ~~дель~~

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

.... дає: ~~страйк~~ та ~~страйк~~

text-decorationВластивість CSS зі значенням line-throughможе використовуватися аналогічно. Код...

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

... також буде виглядати так: ~~текст-прикраса: рядок~~

Однак закреслена лінія, як правило, того ж кольору, що і текст.

Чи можна використовувати CSS, щоб зробити лінію іншим кольором?

html css

— gojomo
джерело

Для прозорого удару через ефект можна побачити прозорий закреслений текст

— web-tiki

408

Так, додавши додатковий обгортковий елемент. Призначте потрібний кольоровий рядок зовнішньому елементу, а потім потрібний колір тексту внутрішньому елементу. Наприклад:

<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-decoration CSS, як у перший приклад тут.)

Для того, щоб прокреслити з'явилися для: наведення курсора, слід використовувати явний таблицю стилів (оголошено або посилається в <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

Просто обгортка. Геніальний. Боже мій, це краще за все, що я придумав (псевдоелементи). Чудова робота!

— Хитрий фаталіст

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 задає колір , який використовується при малюванні підкреслення, overlines або удар прохідні визначається text-decoration-line. Це кращий спосіб забарвлення цих текстових прикрас, а не використання комбінацій інших елементів HTML.

Дивіться також text-decoration-colorу специфікації проекту CSS 3 .

Якщо ви хочете скористатися цим методом негайно, вам, ймовірно, доведеться його префіксувати, використовуючи -moz-text-decoration-color. (Також вкажіть його без -moz-, для сумісності вперед.)

— Механічний равлик
джерело

2

"CSS 3, швидше за все, є", досить ... оптимістично.

— BoltClock

5

@BoltClock: Наскільки це оптимістично? Це вже є в робочому проекті W3C, який активно виконується.

— Механічний равлик

2

Згідно з канюзою , наразі жоден браузер (у 2014 році) не підтримує text-decoration-colorпрефікси.

— Blazemonger

4

І через 3 роки ... Firefox і Safari мають це = 20% охоплення.

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

1

За даними канузи, наразі підтримується лише FireFox

— YakovL

35

Я використав порожній :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);
}

<p>Here comes some <strike>strike-through</strike> text!</p>

Розгорніть фрагмент

— Blazemonger
джерело

@Veve HTML перекреслений елемент

— несемантична

1

дякую, я шукав це, спеціально лінія обертання

— hanan-mstudio

Використання методу: after, швидше за все, матиме проблеми з доступністю

— ewanm89

9

Якщо ви не переймаєтесь Internet Explorer \ edge, найпростішим способом домогтися різного кольору для перекреслення буде використання властивості CSS: color-decoration-color у поєднанні з text-decoration: 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/

Градієнтні зупинки кольорів та розмір фону залежать від висоти лінії. (Я використовував МЕНШЕ для обчислення, а згодом автопрефіксатор ...)

— символи
джерело

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

Відповідь Блаземонгера (вище чи нижче) потребує голосування - але у мене недостатньо балів.

Я хотів додати сіру смугу через деякі круглі кнопки 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;
}

— анодермарк
джерело

0

Присвоєння бажаного кольору рядка для батьківського елемента працює також для видаленого текстового елемента ( <del>), а також робить припущення, що клієнт надає<del> як рядок.

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

— kpowz
джерело

-4

Ось зразок реалізації jQuery - завдяки відповіді gojomo та пропозиції типи (+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; }

— Аксімілі
джерело

Яка частина недійсна? Він працював на всіх основних браузерах

— Аксимілі

3

"Твори" та "дійсні" досить далеко один від одного. Браузери намагаються інтерпретувати навіть HTML, у якому є кілька помилок. Див W3C Markup Validation Service , Чому діє HTML важливо для всіх? , HTML-атрибути DIV? on SO

— kapa

Якщо я не помиляюся, зміна назви атрибута на "data-special" повинна зробити його дійсним HTML5.

— Мухд

13

jQuery, щоб додати обгортку, щоб отримати кольоровий прорив? Що ми стали ?!

— Кріс Бейкер

3

Схоже, можлива проблема XSS: у вас є звичайний текст originalPrice, а потім вставляєте його назад як HTML. Спробуйте використовувати .html()замість .text(). Або, можливо, використовуйте jQuery wrap().

— tuomassalo