Different font color than line-through color with CSS

• 06-05-2006

I got a question if it was possible to make the linethrough in red and still have the font color in black.

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

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:

Remove formatting from Code

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

Get the linethrough image used in this example.

Update

This article was written in 2006. I have later been informed that you can accomplish this without using a background image. You find the solution below.

Remove formatting from Code

Result: text with red linethrough and black text