Remove the underline from links in HTML, CSS

By default, HTML hyperlinks are underlined. However, if you wish to deactivate this feature and display your hyperlinks as non-underlined text, you can do so using the CSS. This article will walk you through the necessary steps.

How to display non-underlined links using CSS?

To remove the underline from HTML links, simply enter the following code in the CSS:

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

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

How to display non-underlined links using CSS via a class?

If you want the style to apply to particular links, simply define a specific class for links that you wish not to be underlined. You may do so using the following code:

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

How to display non-underlined links using CSS online?

Finally, if you do not want to define a style sheet, you can simply set the style online with the following style attribute:

<a href="/" style="text-decoration:none">Text of link</a>