27

赤い取り消し線のある灰色のテキストが欲しいのですが、このスタイルは機能しません。

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

私は何が間違っているのですか？

4

5 に答える 5

76

ネストされた 2 つの要素を使用して、目的の効果をシミュレートできます。たとえば、次のようになります。

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

jsfiddle

于 2010-12-06T08:00:37.023 に答える
21

追加の 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の例があります。

于 2013-03-19T12:40:14.503 に答える
4

CSS2 仕様の意味を理解する別の方法があります。つまり、外側の text-decoration は「ラインスルー」とテキストの色を設定しますが、内側の色宣言 (「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>
于 2011-12-27T19:24:35.383 に答える
3

別の色でラインスルーを作成することはできません。プロパティで定義した色になります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>
于 2010-12-06T07:58:52.447 に答える
1

CSS2の仕様によると

テキスト装飾に必要な色は、'text-decoration' が設定されている要素の 'color' プロパティ値から派生する必要があります。子孫要素の「色」値が異なる場合でも、装飾の色は同じでなければなりません

そういうことはできないということだと思います。

回避策は、ある種の境界線を使用して持ち上げることでしょうか?

于 2010-12-06T08:01:31.947 に答える