web-dev-qa-db-fra.com

CSS: Line-through avec une couleur différente de la couleur du texte?

J'aimerais avoir du texte gris avec une barre rouge, mais ce style ne fonctionne pas:

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

Qu'est-ce que je fais mal?

htmlcssstrikethrough
21
Tony the Pony

Vous pouvez simuler l'effet souhaité avec deux éléments imbriqués, par exemple:

        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

Sans DOM supplémentaire (mais peut ne pas fonctionner pour certaines mises en page pour des raisons évidentes):

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

n exemple jsfiddle ici.

20
Alexander Pavlov

Il n'est pas possible de faire une ligne avec une couleur différente. Il sera dans la couleur que vous définissez avec la propriété color.

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

[~ # ~] modifier [~ # ~] :

ce qui m'est venu à l'esprit est d'utiliser une image de fond avec un point de couleur 1px * 1px dans la couleur que vous aimez.

CSS:

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

HTML:

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

Il existe une autre façon de voir la signification de la spécification CSS2; et c'est-à-dire que la décoration de texte externe définira la couleur de la ligne et du texte, mais une déclaration de couleur interne (dans une balise "span") peut être utilisée pour réinitialiser la couleur du texte.

<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

Les spécifications CSS2 disent

La ou les couleurs requises pour la décoration de texte doivent être dérivées de la valeur de propriété 'color' de l'élément sur lequel 'text-decoration' est défini. La couleur des décorations doit rester la même, même si les éléments descendants ont des valeurs de "couleur" différentes

Je suppose que cela signifie que vous ne pouvez pas le faire de cette façon.

Une solution de contournement pourrait être d'utiliser une sorte de frontière et de la lever?

2
Christian Wattengård