Remove the Underline Under the Links in HTML/CSS

April 2018

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.


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.

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>

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>

Image: © Yuriy Vlasenko - Shutterstock.com
Published by jak58. Latest update on November 26, 2017 at 05:31 PM by owilson.
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 (https://ccm.net/).
Know the Hexadecimal code of a color
Remove the border on an image in a link in HTML / CSS