Sunday, April 8, 2012

CSS strike through colour

How do you make a strikethrough in a different colour than the text?

Two elements, one within another, are needed to accomplish this task. The outer element will set the strike through line and its colour, while the inner element will set the text colour.

Here's the code:

<span style="color: #c00; text-decoration: line-through;">
<span style="color: #000;">
Black text with a red line
</span>
</span>


And here's how it looks:

Black text with a red line

The above example uses two span elements, but you could also use two divs or other elements.

Another example goes below, this time without the inline CSS and using a span within a p.

<style type="text/css">
p.strikethrough { text-decoration: line-through; color: #000; }
span.green { color: #0c0; }
</style>

<p class="strikethrough">
<span class="green">
123
</span>
</p>

No comments:

Post a Comment