web-dev-qa-db-ja.com

CSS：テキストの色と異なる色のラインスルー？

灰色のテキストに赤い取り消し線を付けたいのですが、このスタイルは機能しません。

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

何が悪いのですか？

htmlcssstrikethrough
21
Tony the Pony

2つのネストされた要素を使用して、目的の効果をシミュレートできます。例：

        span.inner {
            color: green;
        }
        span.outer {
            color: red;
            text-decoration: line-through;
        }
<span class="outer">
    <span class="inner">foo bar</span>
</span>

jsfiddle

62
Benjamin Wohlwend

追加の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の例

20
Alexander Pavlov

別の色でラインスルーを作成することはできません。プロパティcolorで定義した色になります。

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

[〜＃〜]編集[〜＃〜]：

私の頭に浮かんだのは、1px * 1pxのカラードットが好きな色のbackground-imageを使用することです。

CSS：

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

HTML：

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

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>
3
G B Carlson

CSS2仕様によると

テキストの装飾に必要な色は、「text-decoration」が設定されている要素の「color」プロパティ値から取得する必要があります。子孫要素の「カラー」値が異なっていても、装飾の色は同じである必要があります

それはあなたがそうすることができないことを意味していると思います。

回避策は、ある種の境界線を使用して、それを解除することでしょうか？

2
Christian Wattengård