CSS: Line-in mit einer anderen Farbe als die Textfarbe? [Duplikat]

Question

Diese Frage bereits eine Antwort hier:

• CSS gestrichener andere Farbe Text? 12 Antworten

Ich mag grauen Text mit einem roten Durchschlag haben, aber dieser Stil nicht funktioniert:

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

Was mache ich falsch?

Answer 1

Sie können den gewünschten Effekt mit zwei verschachtelten Elementen simulieren, z.

<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

Ohne zusätzlichen DOM (aber möglicherweise nicht für einige Layouts aus offensichtlichen Gründen):

<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 Beispiel hier.

Answer 3

Es ist nicht möglich, eine Linie Durchführung mit einer anderen Farbe zu machen. Es wird in der Farbe, die Sie mit Eigenschaft color definieren.

finden Sie unter http://www.w3.org/TR /CSS2/text.html#lining-striking-props

Bearbeiten :

, was kam ich in dem Sinn ist mit einem 1px * 1px Farbpunkt in der Farbe, die Sie wie ein Hintergrundbild zu verwenden.

CSS:

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

HTML:

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

Answer 4

Es gibt eine andere Art und Weise auf die Bedeutung der CSS2 Spezifikation suchen; und das ist die äußeree Text-Dekoration, die Farbe des Satz wird „line-through“ und Text, sondern eine innere Farbdeklaration (in einem ‚Spanne‘ tag) kann verwendet werden, die Textfarbe zurückgesetzt wird.

<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

Die CSS2-Spezifikationen sagen

Die Farbe (n) für den Text Dekoration erforderlich ist, muß von dem ‚Farbe‘ Eigenschaftswert des Elements abgeleitet wird, auf dem ‚text-decoration‘ gesetzt ist. Die Farbe der Verzierungen müssen gleich bleiben, auch wenn Nachkomme Elemente unterschiedliche ‚Farbe‘ Werte

ich denke, das bedeutet, dass Sie es auf diese Weise nicht tun können.

Eine Abhilfe könnte eine Art von Grenze verwenden, und hebt es?