See also: • Computer Stuff • View JavaScript HTML output • HTML Stop Line Break
29 March 2012
How to underline and line-through the same text with CSS.
Here are some other phrases that might have brought you to this page.
How to underline and line-through at the same time in html • Strike out and underline in html • Line-thru text and underline at the same time in CSS • Combine text decoration in same text • html text decoration conflict • Text decoration single value • Combine text decoration values • How to have more than one text decoration value • html decoration two values • Underline and line-through together • Both underline and line-through the same text on a web page

It may not be a common requirement and in most cases folk can do without it even if it is what they want.  But how can you underline AND line-through the same text on a web page?  It seems an impossible task.

I had created a Word document and had used line-through and underline to emphasize words that had been deleted from a quote.  I had used bold and italic together to highlight words that had been added.  I had done this because I didn't want to rely on coloured backgrounds or text in my document because it was likely to be photocopied to several people.  It seemed simple.  Word does it without a problem.  Then I wanted to put the document on the web...

But I couldn't underline and strike-through the same text!

I struggled looking into all sorts of things including creating null HTML hyperlinks in anchored text but nothing seemed to work.

The main problem seems to be that the "text decoration" property in CSS can only have one of several values.  Those values are "none", "underline", "overline", "line-through", "blink" or "inherit".  (Apparently the "blink" value is not supported in IE, Chrome, or Safari.)  But they are mutually exclusive and so you cannot have two "text-decorations".

Eventually I came up with a solution which seems to work in all browsers and this is it...

Create two styles: one called .text-underline and another called .text-strike-out.
(I've called it strike-out because that is what I used at the time but you can call it anything you like.)

create the styles in the <head> section
.text-strike-out {text-decoration: line-through;}
.text-underline {text-decoration: underline;}

You can't just use them as a combination of classes applied to a tag like <span> or <div> because the last one overrides the first one effectively cancelling it out.

What you do in the <body> is to create a <span> and an anchor, <a>, without a hyperlink like this...
<span class="text-strike-out"><a class="text-underline">ex</a></span>

It produces ... ex

You can also do it inline in the <body> like this:
<span style="text-decoration:line-through"><a style="text-decoration:underline">ex</a></span>

So now you can do stuff like "the cat sat on ripped up the mat."

Works perfectly! Problem solved!

So if for some reason you want to strike-through and underline the same text on a web page this is a solution. I hope that has helped some people who, like me, want to achieve the impossible.


Made 29 March 2012
Toxic Drums Share

© Sente Limited 2012