View Full Version : how to set colour of text-decoration

01-29-2006, 03:07 PM
I've googled and searched in this forum as best I could....

Is there a way to set the colour of the text-decoration? I'm thinking specifically of line-through so that the strike out line is red but the underneath text is black. I tried the following, but of course it didn't work:

.strike {background:#fff;color:#000;text-decoration:line-through #f00;}

w3schools merely says that "The color of the decoration should be set by the "color" property."

(I can't believe that I'm the only person who has thought of doing this!)

01-29-2006, 03:14 PM
You won't be able to do it with text decoration, placing a border below it should give you what you want.

.strike {
background: #FFF;
color: #000;
border-bottom: 1px solid #F00;

Edit, sorry misread slightly, that won't give you what you're after. :o

How about creating a background image of a red line, then setting it as the background of .strike?

01-29-2006, 04:59 PM
<strike> tags are deprecated, you should be using <del> instead

However I do not think it is possible to change the colour of the strike through.

01-29-2006, 05:01 PM
He didn't say he's using strike tags...

01-29-2006, 06:04 PM
Okay, well here's one way I can think of doing it, but it's not very nice :)

del { color:#f00; }
del span { color: #000; }

And then e.g,

<p>This is pretty <del><span>nice</span></del>, dirty.</p>

Hopefuly you can see what it's doing.

01-29-2006, 11:31 PM
del { color:#f00; }
del span { color: #000; }

And then e.g,

<p>This is pretty <del><span>nice</span></del>, dirty.</p>

Yes, indeed, that works. Thank you, MetalStorm, for coming up with that creative solution.

(also thanks to mark87 for leaping to my defense in re the use of strike tags. I did know that the fanatics at w3c had suddenly decided at some point in the past to ditch 'strike' and 's' in favour of 'del'. I can't wait for them to decree in two or three years that it will always be 'x'. You gotta love planned obsolescence. ;))

01-29-2006, 11:39 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">

.strike {
color: #FF9933;
border-bottom: solid 1px #333;
line-height: 3px;


<p class="strike">some stricken text</p>

Gary edit: oops didn't see metalstorm's solution, better than mine :)