Understanding Underlines

  • Revision slug: Understanding_Underlines
  • Revision title: Understanding Underlines
  • Revision id: 202661
  • Created:
  • Creator: CitizenK
  • Is current revision? No
  • Comment

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!

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>
Revert to this revision