CSS: Line-through with a color different from the text color?

Question

I’d like to have gray text with a red strike-through, but this style doesn’t work:

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

What am I doing wrong?

score 73 · Accepted Answer · edited Dec 11 '19 at 03:24

73

You can simulate the desired effect with two nested elements, e.g.:

        span.inner {
            color: green;
        }
        span.outer {
            color: red;
            text-decoration: line-through;
        }

<span class="outer">
    <span class="inner">foo bar</span>
</span>

jsfiddle

edited Dec 11 '19 at 03:24

Ericgit

2,624
2
22
34

answered Dec 06 '10 at 08:00

Benjamin Wohlwend

28,402
10
83
95

3

Wow... That actually works :) The colors hurt my eyes, but it worked ;) – Christian Wattengård Dec 06 '10 at 08:05
27

I'll provide a more pleasing color combination for a small fee ;) – Benjamin Wohlwend Dec 06 '10 at 08:10
@BenjaminWohlwend, you Sr. have won the internet :D – Zero Dragon Mar 01 '13 at 00:31

score 21 · Answer 2 · answered Mar 19 '13 at 12:40

21

With no extra DOM (but may not work for some layouts for obvious reasons):

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

answered Mar 19 '13 at 12:40

Alexander Pavlov

29,538
4
63
88

8

It's worth mentioning that this does not work well for multi-line inline elements. Only the first line will be decorated. – Alexander Pavlov Mar 20 '13 at 08:37

score 3 · Answer 3 · answered Dec 06 '10 at 07:58

It's not possible to make a line-through with a different color. It will be in the color you define with property color.

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

EDIT:

what came into my mind is to use a background-image with a 1px * 1px color dot in the color you like.

CSS:

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

HTML:

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

nope, the line will be behind the text. – borisdiakur Jun 02 '13 at 21:01 — borisdiakur, Jun 02 '13 at 21:01

score 3 · Answer 4 · answered Dec 27 '11 at 19:24

3

There is another way of looking at the meaning of the CSS2 specification; and that is the outer text-decoration will set the color of the "line-through" and text, but an inner color declaration (in a 'span' tag) can be used to reset the text color.

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

answered Dec 27 '11 at 19:24

G B Carlson

39
2

This actually should get more upvotes, as it does what the OP wants with minimum added markup, and *works for multi-line texts also*. – claudius iacob Mar 31 '17 at 10:30
Fantastic solution! – luvaas Apr 01 '17 at 21:30

score 1 · Answer 5 · answered Dec 06 '10 at 08:01

The CSS2 specs says

The color(s) required for the text decoration must be derived from the 'color' property value of the element on which 'text-decoration' is set. The color of decorations must remain the same even if descendant elements have different 'color' values

I guess that means that you can't do it that way.

A workaround could be using some kind of border, and lifting it?

CSS: Line-through with a color different from the text color?

5 Answers5