Summary: Understanding the CSS declaration text-decoration: underline; and how it is supposed to work according to the CSS standard can be tricky. Learn how to properly use text-decorations in CSS compliant browsers as well as other not so compliant browsers. It's fairly common for Web designers to want to get rid of underlines on some (or all) of the hyperlinks in their designs. Thanks to some non-standard behaviors in past browsers, however, there is some confusion as to the proper way to remove an underline from a link. The most common mistake is to do something like this:
<a href="link.html"> <span style="text-decoration: none;">a link</span> </a>
Contrary to popular belief, this is not how one gets rid of underlines. The reasons why, and the correct approach to removing underlines, are explored in this article. The biggest advantage to doing things correctly is that it results in less markup and easier-to-read source code!
How Text Gets Decorated
The key to understanding how to properly remove underlines is to understand how text decorations are applied in the first place. First, let's consider a paragraph with a
span inside it.
<p><span style="text-decoration: underline;"> This is some text </span></p>
Rather unsurprisingly, this will have the result shown in Figure 1: underlined text.
Now, let's add another
span to the mix, making it a child of the first
span. We'll also give it a different decoration than the first, with the result shown in Figure 2.
<p><span style="text-decoration: underline;"> This is some <span style="text-decoration: overline;">extra</span> text. </span></p>
We might expect that this would lead to a situation where the word "extra" has both an overline and an underline, and indeed Figure 2 shows us this is the case. But how exactly does this happen? The inner span, the one with the overline, has only been given an overline decoration.
text-decoration does not inherit, so how can there be an underline beneath the word "extra?"
We begin to get an idea of what's happening if we change the color of the inner
span to, say, red. This is shown in Figure 3.
The overline changes to red along with its text, but the underline does not. That's because the underline is actually a part of the outer span, and it simply runs beneath the inner span. If we were to set a background on the outer span, we would expect it to be visible behind the inner span as well. In the same way, text decorations on parents can appear to apply to child elements without actually doing so.
Now, let's suppose we explicitly remove any decoration from the inner
<p><span style="text-decoration: underline;"> This is some <span style="text-decoration: none; color: red;">extra</span> text. </span></p>
This will mean no decorations at all for the inner
span, but this does not suppress display of the outer
span any more than making the inner span's background transparent would prevent us from seeing a background on the outer span (or on the
body element, for example). We can see this clearly in Figure 4, where the underline is still the same color as the outer
So now consider a case where you have a
span inside a hyperlink whose sole purpose is to turn off the underline on the link. It can never succeed at this task for the same reason the red "extra" didn't get rid of the underline of its parent. See Figure 5, which illustrates the following markup.
<a href="http://developer.netscape.com/">A link <span style="text-decoration: none; font-weight: bold;"> with a span </span> inside</a>
So if we can't turn off underlines in this fashion, we need another one. It's a lot simpler than you might think.