CSS: Линейный цвет отличается от цвета текста?

Ответ 1

Вы можете имитировать желаемый эффект с помощью двух вложенных элементов, например:

<style type="text/css">
    span.inner {
        color: green;
    }
    span.outer {
        color: red;
        text-decoration: line-through;
    }
</style>

<span class="outer">
    <span class="inner">foo bar</span>
</span>

jsfiddle

Ответ 2

Без дополнительных DOM (но может не работать для некоторых макетов по понятным причинам):

<style type="text/css">
    .strikethrough {
        position: relative;
    }

    .strikethrough:before {
        border-bottom: 1px solid red;
        position: absolute;
        content: "";
        width: 100%;
        height: 50%;
    }
</style>

<span class="strikethrough">Foo Bar</span>

Пример jsfiddle здесь.

Ответ 3

Есть еще один способ взглянуть на смысл спецификации CSS2; и это внешний текст-украшение задает цвет "сквозной" и текст, но внутренняя декларация цвета (в теге "span" ) может использоваться для reset цвета текста.

<p style="text-decoration:line-through;color:red">
<span style="color:#000">
The "line-through" and "color" are declared in 'p', and the inner 'span' 
declares the correct color for the text.
</span>
</p>

Ответ 4

Невозможно сделать сквозной проход с другим цветом. Он будет в цвете, который вы определяете с помощью свойства color.

см. http://www.w3.org/TR/CSS2/text.html#lining-striking-props

ИЗМЕНИТЬ

что мне пришло в голову - использовать фоновое изображение с цветной точкой 1px * 1px в цвете, который вам нравится.

CSS

.fakeLineThrough {
  background-image: url(lineThroughDot.gif);
  background-repeat: repeat-x;
  background-position: center left;
}

HTML:

<span class="fakeLineThrough">the text</span>

Ответ 5

В спецификациях CSS2 говорится

Цвет (ы), требуемый для оформления текста, должен быть получен из значения свойства color для элемента, на котором установлен "text-decoration". Цвет украшений должен оставаться неизменным, даже если элементы-потомки имеют разные значения цвета

Я предполагаю, что это означает, что вы не можете этого сделать.

Обходной путь может использовать какую-то границу и поднимать ее?