Remove the underline under the links in HTML/CSS

September 2017

Remove the underline under the links in HTML/CSS


HTML hyperlinks are underlined (by default) and it is possible to remove the colored line using the CSS.

Using CSS


<style type="text/css">  
a.nounderline:link  
{  
 text-decoration:none;  
}  
</style>  

Note that the pseudo-class: link allows you to target only the hyperlinks (<a href="">) and anchors (<a name="">) and is not compulsory.

Using CSS via a class


You want the style to apply to particular links, simply define a specific class for the links that are not underlined (eg nounderline class):

<style type="text/css">   
a.nounderline: link   
(   
Text-decoration: none;   
)   
</ style>   
<style type="text/css">  
a.nounderline:link  
{  
 text-decoration:none;  
}  
</style>

When writing the link to refer to this class:
<a href="/" class="nounderline">Text of link</a>

Using CSS online


Finally, if you do not want to define stylesheet, you can simply set the style online with the style attribute, as follows:
<a href="/" style="text-decoration:none">Text of link</a>

Related

Published by jak58. Latest update on September 14, 2012 at 07:18 AM by deri58.
This document, titled "Remove the underline under the links in HTML/CSS," is available under the Creative Commons license. Any copy, reuse, or modification of the content should be sufficiently credited to CCM (ccm.net).