codedamn

Remove underline from link CSS

  • Shubham Gupta's profile image
    Shubham Gupta
    Author
Remove underline from link CSS

If you work as a web developer, you may have wished to get rid of the underline that automatically displays when you add a link to a page. Fortunately, links can be customized with CSS attributes just like any other element. You may alter their background color, text size, and color with CSS. Even the underline that appears beneath links can be removed.  

I’ll demonstrate how to use CSS to get rid of the underlining from a link in this article. I’ll also demonstrate how to remove the underline for each of the four states in which links may exist.  

Styling properties for the link tag

The following are the CSS properties to style the Link tag (<a>):

  • color  
  • text-decoration  
  • background-color  
  • text-align  
  • Padding, margin  
  • display  

States of Link tag 

It is crucial to understand that there are four possible states for the link tag (anchor tag). These states are CSS classes based on user activity, also referred to as pseudo-classes. The four pseudo-classes are defined further down.  

  • a:link – a normal, unvisited link  
  • a:visited – a link the user has visited  
  • a:hover – a link when the user mouses over it  
  • a:active – a link the moment it is clicked  

Links will by default have underlining next to them when they are hovered over, clicked on, or visited in any pseudo-state, including none of the above. The example that follows demonstrates this:  

Removing Underline style from Links

One of the most often asked topics from novice front-end coders is how to remove the underline from links. The good news is that the text-decoration attribute makes the procedure easy. To do it, you simply need a basic understanding of HTML and CSS. Using the CSS text-decoration property, you may make links without underlines. To remove underlines from links, most people use the text-decoration attribute.

By defining the property described below, you can entirely remove the underlining from links on your HTML or Bootstrap website. It’s truly that easy to take the underline out of a sentence. Let’s examine the code as a whole before examining how it appears on the front end.  

Add the following HTML to the body section of your webpage.  

Here’s the HTML:  

<body> <h1> <b><a href="#">Link</a> To CodeDamn</b> </h1> </body>
Code language: HTML, XML (xml)

Here’s the result:  

Use the text-decoration property in the style section to specify the pseudo classes.  

NOTE: Ensure that a:link, a:visited, and a:active appear before a:hover and respectively after a:active. This is necessary for the CSS to cascade.  

Set the value of each state’s text-decoration property to “none.”  

Here’s the CSS:  

<style> /* unvisited link */ a:link { text-decoration: none; } /* visited link */ a:visited { text-decoration: none; } /* mouse over link */ a:hover { text-decoration: none; } /* selected link */ a:active { text-decoration: none; } </style>
Code language: CSS (css)

Here’s the result after adding text-decoration to none:  

Be careful about the order. The order should be a:link and a:visited must come first, then a:hover, then a:active.  

Additionally, the underlining can be changed such that it only appears when a user hovers over and selects a link. Follow these guidelines when using text-decoration:  

<style> /* unvisited link */ a:link { text-decoration: none; } /* visited link */ a:visited { text-decoration: none; } /* mouse over link */ a:hover { text-decoration: underline; } /* selected link */ a:active { text-decoration: underline; } </style>
Code language: CSS (css)

Conclusion  

In this article, we have learned how to remove the underline from the link/anchor tag. I’m hoping this article will help you understand how to make links in CSS without the usual underline.

Please feel free to share this blog with your loved ones if you find it useful. If you have any queries related to the front end, do drop them down in the comment section. Also, do check out Codedamn courses if you want to learn more about HTML and CSS styling with its use cases and amazing projects. They also have an in-built playground for different programming languages and environment sets, so do check that out and join Codedamn’s community!  

Thank You for Reading🙂 

{Happy Coding!} 

Learn programming on codedamn

Codedamn is an interactive coding platform with tons of sweet programming courses that can help you land your first coding job. Here's how:

Programming is one of the most in-demand jobs today. Learning to program can change your future. All the best!