CSS зачеркивает другой цвет от текста? - PullRequest
Новая
       17

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

252 голосов
/ 10 июля 2009

Элементы 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, чтобы сделать линию другим цветом?

Ответы [ 12 ]

391 голосов
/ 10 июля 2009

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

<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, как в первом примере здесь.)

Чтобы зачеркивание отображалось для: 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 - нет.)
66 голосов
/ 04 июня 2012

По состоянию на февраль 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 */
}

В результате: Text decoration example

CSS 3, скорее всего, получит прямую поддержку, используя text-decoration-color свойство . В частности:

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

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

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

31 голосов
/ 04 октября 2014

Я использовал пустой элемент :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>
6 голосов
/ 22 августа 2013

Добавляя к @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>
5 голосов
/ 10 мая 2018

Если вам не важен Internet Explorer \ Edge, то самым простым способом достижения другого цвета для зачеркивания будет использование свойства CSS: текстовое оформление-цвет в сочетании с текстовым оформлением: сквозное; 

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

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

5 голосов
/ 11 марта 2014

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

4 голосов
/ 08 августа 2017

Вот, пожалуйста: 

<style>body {color: #000;}</style>
<del>&nbsp;&nbsp;<span style="color:#999">facebook</span>&nbsp;&nbsp;</del>
3 голосов
/ 26 января 2017

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

<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 голосов
/ 21 марта 2019

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

span{
    text-decoration: line-through;
    text-decoration-color: red;
}
2 голосов
/ 30 октября 2014

За ответ 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;
}
Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...