Removing the underline from a tag

Remove underline from link CSS – When you create a link on your website, it displays with an underline by default. This is to let the user know that they can click on the text and be taken to another page. However, this can get in the way of other design elements that are already there or remove some color from your website. In this article, we will describe how to remove underline from links using css.

Remove underline from link CSS

The anchor tag is used to define the hyperlinks and it displays underlined anchor part by default. The underline can be easily removed by using the text-decoration property. The text-decoration property of CSS allows decorating the text according to requirements. By setting the text-decoration to none to remove the underline from the anchor tag.

Syntax:

text-decoration: none;

Example:

<!-- Remove underline from link css -->
<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        text-decoration property 
    </title>
      
    <!-- text-decoration property to remove
        underline from link css -->
    <style>
        #link{
            text-decoration: none;
        }
    </style>
</head> 
  
<body style = "text-align:center;"> 
  
    <h1 style = "color:green;" > 
        advdev.net 
    </h1>
      
    <h3>Original Link</h3>
      
    <a href = "#">Link 1</a>
      
    <br> 
      
    <h3>removed Underline</h3>
      
    <a id = "link" href = "#">Link 2</a> 
</body> 
  
</html>             

In the example above, remove the underline from the link is demonstrated through text-decoration: none. The anchor tag with underline will not have an underline when it’s clicked on or hovered over by a mouse. In this way, you can remove the underline from the link using CSS easily and quickly.

You should only use the text-decoration property on an anchor tag

The text-decoration property only works when you use this property directly on the anchor tag. If your anchor tag is a child of any other tag then you can’t use text-decoration property to the parent. It would not work on a child anchor tag.

When you remove the underline from the anchor tag, it will remove any color changes that are already applied to your link. The default text-decoration property of the stylesheet is none and this has no effect on how other elements look like in a webpage. For example, if your link is green then when you remove the underline using CSS and remove the color, it would not remove any borders that are added to your link.

The text-decoration property does not remove the underline from active links or visited links. Only normal unvisited and hover-over links will be without an underline when you remove the underline using CSS. Once a user clicks on such a link then the underline will be added back to the link.

Example:

<!-- HTML code to remove underline from link css -->
<!DOCTYPE html>
<html>
<head>
	<title>
		text-decoration property
	</title>
	
<!-- text-decoration property to remove underline from link css -->
	<style>
		a:link {
			text-decoration: underline;
		}
		a:hover {
			text-decoration: none;
		}
	</style>
</head>
<body style = "text-align:center;">
<h1 style = "color:green;" >
		The Advance Developer
	</h1>
	<a id = "GFG" href = "https://advdev.net">AdvDev.net</a>
</body>
</html>					

CSS Link Color: Main Tips

There are 4 link states: active, hover, link, and visited. A shortened version is also available for links that fall into this category so you don’t have to remember all these lengthy names!

It’s important to keep in mind the sequence of these states. They should be ordered as follows:

hover goes after a: link and a: visited and active should appear after visited

Link States:

When it comes to changing the color of your links, there is no one-size-fits-all solution. Developers have three different options for what state they want their link adheres to default (blue), hover, and active states which can be customized with CSS stylesheets in a variety of hues including green or pink!

  • a:link – unvisited.
  • a:hover – when the mouse pointer hovers over it.
  • a:active – when a user clicks the link.
  • a:visited – visited link.

Conclusion:

Conclusion paragraph: This article has hopefully helped you better understand how to remove underline from links in your website. If you want more information on this topic, we recommend checking out our blog post “How to Remove Underlines From Links.” Happy designing!

Also, read: CSS Diner Answer for All Levels

Find us on Facebook

Leave a Comment