Making line-through color to appear different than the text (using CSS)

I am posting a simple trick to make the color of line-through line to appear different than the stricken text. I had to recall this trick actually as we rarely use it and i guess i myself never used it before i guess (may be i had but i don’t know exactly. :)).

Ok. As of normal, to strike text we can write:

<span style="text-decoration:line-through;">Strike through this text</span>

gives Strike through this text

or

<strike>Strike through this text</strike>

gives Strike through this text.

The color of text and line-through above was black, which is the default color of my page so didn’t really need to write it. To apply a red line-through color I’ll do:

<span style="text-decoration:line-through;color:red;">
<span style='color:black;'>Strike through this text</span>
</span>

gives Strike through this text

or

<strike style='color:red;'>
<span style='color:black;'>Strike through this text</span>
</strike>

gives Strike through this text

One thought on “Making line-through color to appear different than the text (using CSS)

  1. Thank you so much for the tips… Not sure if you are familiar with wordpress but wanted to ask you 2 quick questions (i actually have a lot but these are the most pressing)..

    1. How do you make a nice bold strikethrough in red as the default post formatting. (so i dont have to cahnge the code every single time I use it. I use the strikethroughs as part of the writing style/theme so that would be a nice add for the site.

    2. When post appear on the frontpage of the blog… they show no strikethroughs at all… what would I need to change so they do show up.

    I am very new to blogging and to wordpress so any advice you can give would be really helpful. THANK YOU…

Leave a Reply