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

Question

Я хотел бы иметь серый текст с красной зачеркнуты, но этот стиль не работает:

color: #a0a0a0; 
text-decoration: line-through 3px red; 

Что я делаю неправильно?

Answer 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

Answer 2

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

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

EDIT:

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

CSS:

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

HTML:

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

Answer 3

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

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

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

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

Answer 4

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

<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> 

Answer 5

Без лишних 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> 

A jsfiddle example here.