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>