Remove the underline under the links in HTML/CSS

November 2016

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 :

This document entitled « Remove the underline under the links in HTML/CSS » from CCM (ccm.net) is made available under the Creative Commons license. You can copy, modify copies of this page, under the conditions stipulated by the license, as this note appears clearly.