Different font color than line-through color with CSS

I got a question if it was possible to make the linethrough in red and still have the font color in black. The answer to this is that it's not possible, but it's possible to give a visual impression of this.

9/2/2006

10
  • Currently 4/5 Stars
  • 1
  • 2
  • 3
  • 4
  • 5

First, this is how a text with linethrough looks like. So, how to make the text black with a red linethrough?

The answer is, you can't have a different color on line-through, it will get the same color as the font. However, this can be accomplished by thinking outside "the box" as the example below shows.

Here is some text with fake linethrough where the text is black and the linethrough is red.

How is this linethrough made?

Make a red picture with the size 1x3px where the red part covers the 1px at the bottom of the image. Then mix it with a dash of CSS:

  1. .fake-linethrough {
  2. background: url(/foldername/linethrough.gif) repeat-x center left;
  3. color: #000;
  4. }

Our HTML for this fake linethrough:
<span class="fake-linethrough">fake linethrough</span> gives the result
fake linethrough.

Some drawbacks with this solution is that is not printer friendly since background images normally won't be printed, and if you increases the font size the height of the line will still be the same. But as you see, the line is still centered.

Get the linethrough image used in this example.

Internet tools