理解下划线

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:

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.

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 span element.

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 span.

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.

So if we can't turn off underlines in this fashion, we need another one. It's a lot simpler than you might think.

How to
Really
Turn Off Underlines

The answer is simple: if you don't want a link to have an underline, then turn off the underlining for the link itself. Don't try to override the decoration with a span inside the link. It won't work in properly written browsers, and even if it did it would be a wasteful practice.

For example, let's say you wanted to remove the underlining from all hyperlinks throughout the document. That's as easy as:

a:link, a:visited {text-decoration: none;}

Another common situation is to remove the underlines from only a select set of links. For example, navigation links across the top of a page are often a target for the no-underline treatment. In that case, your best bet is to class (or ID) an element that those links share in common, and then write styles accordingly. For example, suppose you have all of your links in a table. Adding an id attribute to the table itself is the way to go.

Of course, you could put classes directly on the links you wish to style, and in some cases that's necessary. However, in the majority of cases, authors will be well served by an approach similar to the one shown here.

Other Decorations

This article has focused on underlines because they are by far the most common text decoration in use on the Web. However, the principles discussed here apply to any form of decoration. If text is styled with a strike-through line, then that will run through the element's text and the text of any descendant elements, no matter what value they are given for text-decoration. As an example:

<p style="text-decoration: line-through;">
This text has been
<span style="text-decoration: none; color: red;">stricken</span>
with a line.
</p>

The text in this paragraph will all be stricken, although the word "stricken" will be red. This is shown in Figure 6.

Conclusion

Although some browsers will let you get away with it, the use of span to "switch off" text decorations is not correct CSS and will not work in CSS-conformant browsers. Thus, many Web sites authored to proprietary behavior will not display as the designer intended in more recent browsers. Fortunately, there are several benefits to abandoning this legacy code practice in favor of directly styling hyperlinks.

Recommendations

Do not try to style links with span elements; the practice is wasteful and cannot be used to "remove" text decorations such as underlines in CSS-conformant browsers.

Make use of CSS selectors and the ability to class or ID elements to bring efficiency to your CSS.