line-through

Can I give the value a value?

[D_Blackwell]

I have:

{
text-decoration: line-through;
}

The foreground color is #900, and I want the line-through to be #000. Can I do it?

[DrDoc]

You'd have to wrap the text in two tags...

p {
text-decoration: line-through;
color: #000;
}
p span {
color: #900;
}

<p><span>TEST</span></p>

[aevea]

The spec says that:

The color(s) required for the text decoration should be derived from the 'color' property value.

This property is not inherited, but descendant boxes of a block box should be formatted with the same decoration (e.g., they should all be underlined). The color of decorations should remain the same even if descendant elements have different 'color' values.

so there's no easy way to do it, but you could do it through nesting:

<del><span>This is wrong</span></del>
del {text-decoration: line-through; color: #000; }
del span {color: #900;}

Inelegant and not so semantic, but it sure is pretty.

Adam
<doc beat me to it>

[D_Blackwell]

Thanks. My use calls for the line-through to fall within some text. I've tweaked your suggestion:

p {
display: inline;
}
p.lthrough {
text-decoration: line-through; color: #000;
}
p.lthrough span {
color: #900;
}
----
<p>
This looks to have more possibility?
</p>
<p class="lthrough">
<span> except for streamling?</span>
</p>
<p>This is a test.
</p>

This works for what I need. Can it be improved upon? I wasn't thrilled to go with display: inline; (my inclination was to work in another span) - but it worked, and I was no place before y'all stepped up.

Also, I'm not yet understanding why the recommended

p span {
color: #900;
}

works. Why doesn't it take the line-through with it?

[drbrain]

Why are you using the line-through style? Would the ins or del HTML elements [w3.org] for marking document changes better describe what you are doing?

[D_Blackwell]

I'm using the line-through to make a point. In this context, it's a style issue.

I've never used either <ins> or <del>, so reading the spec was interesting, but I don't think it applies here for two reasons.

1.
---User agents should render inserted and deleted text in ways that make the change obvious...---

I don't want that. (default for IE6 seems to be underline for <ins> and line-through for <del>)

2.
The line-through for <del> would be fine, and easier, except that I wasn't able to create the effect of black text with red line-through.