Understanding Underlines

  • Revision slug: Understanding_Underlines
  • Revision title: Understanding Underlines
  • Revision id: 202668
  • Created:
  • Creator: CitizenK
  • Is current revision? No
  • Comment /* How Text Gets Decorated */

Revision Content

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.

Figure 1

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>

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.

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.

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

Figure 4

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>

Figure 5

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.

<table id="navbar">
<tr>
<td><a href="link1.html">Home</a></td>
<td><a href="link2.html">Electronics</a></td>
<td><a href="link3.html">Accessories</a></td>
<td><a href="link4.html">Software</a></td>
<td><a href="link5.html">Checkout</a></td>
</tr>
</table>

With the id in place, we can now write a single CSS rule:

table#navbar a {text-decoration: none;}

The biggest beneficial side-effect is that it's possible to expand on this rule to give the links other styles. For example:

table#navbar a {text-decoration: none; color: yellow;
font: 10px sans-serif; letter-spacing: 1px; padding: 0 1em;}

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

Revision Source

<p><span class="comment">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.</span>
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:
</p>
<pre>&lt;a href="link.html"&gt;
&lt;span style="text-decoration: none;"&gt;a link&lt;/span&gt;
&lt;/a&gt;</pre>
<p>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!
</p>
<h3 name="How_Text_Gets_Decorated"> How Text Gets Decorated </h3>
<p>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 <code>span</code> inside it.
</p>
<pre>&lt;p&gt;&lt;span style="text-decoration: underline;"&gt;
This is some text
&lt;/span&gt;&lt;/p&gt;</pre>
<p>Rather unsurprisingly, this will have the result shown in Figure 1: underlined text.
</p><p><img align="none" alt="Figure 1" src="File:en/Media_Gallery/Figure01.gif">
</p><p>Now, let's add another <code>span</code> to the mix, making it a child of the first <code>span</code>. We'll also give it a different decoration than the first, with the result shown in Figure 2.
</p>
<pre>&lt;p&gt;&lt;span style="text-decoration: underline;"&gt;
This is some 
&lt;span style="text-decoration: overline;"&gt;extra&lt;/span&gt; 
text.
&lt;/span&gt;&lt;/p&gt;</pre>
<p><img align="none" alt="Figure 2" src="File:en/Media_Gallery/Figure02.gif">
</p><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. <code>text-decoration</code> does not inherit, so how can there be an underline beneath the word "extra?"
</p><p>We begin to get an idea of what's happening if we change the color of the inner <code>span</code> to, say, red. This is shown in Figure 3. 
</p><p><img align="none" alt="Figure 3" src="File:en/Media_Gallery/Figure03.gif">
</p><p>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.
</p><p>Now, let's suppose we explicitly remove any decoration from the inner <code>span</code> element.
</p>
<pre>&lt;p&gt;&lt;span style="text-decoration: underline;"&gt;
This is some 
&lt;span style="text-decoration: none; color: red;"&gt;extra&lt;/span&gt; 
text.
&lt;/span&gt;&lt;/p&gt;</pre>
<p>This will mean no decorations at all for the inner <code>span</code>, but this does not suppress display of the outer <code>span</code> any more than making the inner span's background transparent would prevent us from seeing a background on the outer span (or on the <code>body</code> element, for example). We can see this clearly in Figure 4, where the underline is still the same color as the outer <code>span</code>.
</p><p><img align="none" alt="Figure 4" src="File:en/Media_Gallery/Figure04.gif">
</p><p>So now consider a case where you have a <code>span</code> 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.
</p>
<pre>&lt;a href="http://developer.netscape.com/"&gt;A link 
&lt;span style="text-decoration: none; font-weight: bold;"&gt;
with a span
&lt;/span&gt; inside&lt;/a&gt;</pre>
<p><img align="none" alt="Figure 5" src="File:en/Media_Gallery/Figure05.gif">
</p><p>So if we can't turn off underlines in this fashion, we need another one. It's a lot simpler than you might think.
</p>
<h3 name="How_to_Really_Turn_Off_Underlines"> How to <i>Really</i> Turn Off Underlines </h3>
<p>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 <code>span</code> inside the link. It won't work in properly written browsers, and even if it did it would be a wasteful practice.
</p><p>For example, let's say you wanted to remove the underlining from all hyperlinks throughout the document. That's as easy as:
</p>
<pre>a:link, a:visited {text-decoration: none;}</pre>
<p>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 <code>id</code> attribute to the <code>table</code> itself is the way to go.
</p>
<pre>&lt;table id="navbar"&gt;
&lt;tr&gt;
&lt;td&gt;&lt;a href="link1.html"&gt;Home&lt;/a&gt;&lt;/td&gt;
&lt;td&gt;&lt;a href="link2.html"&gt;Electronics&lt;/a&gt;&lt;/td&gt;
&lt;td&gt;&lt;a href="link3.html"&gt;Accessories&lt;/a&gt;&lt;/td&gt;
&lt;td&gt;&lt;a href="link4.html"&gt;Software&lt;/a&gt;&lt;/td&gt;
&lt;td&gt;&lt;a href="link5.html"&gt;Checkout&lt;/a&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;</pre>
<p>With the <code>id</code> in place, we can now write a single CSS rule:
</p><p><code>table#navbar a {text-decoration: none;}</code>
</p><p>The biggest beneficial side-effect is that it's possible to expand on this rule to give the links other styles. For example:
</p>
<pre>table#navbar a {text-decoration: none; color: yellow;
font: 10px sans-serif; letter-spacing: 1px; padding: 0 1em;}</pre>
<p>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.
</p>
<h3 name="Other_Decorations"> Other Decorations </h3>
Revert to this revision