Remove underline of links in CSS

Remove underline of links

A frequently asked question is how to remove the underlining of links?

You should consider carefully whether it is necessary to remove the underlining as it might decrease usability of your website 

significantly. People are used to blue underlined links on web pages and know that they can click on them. Even my mum knows that! If you change the underlining and color of links there is a good chance that users will get confused and therefore not get the full benefit of the content on your website.

the property text-decoration can be used to determine whether text is underlined or not. To remove underlining, simply set the value of text-decoration to none.

 
 a {
  text-decoration:none;
 }
 
 

Alternatively, you can set text-decoration along with other properties for all four pseudo-classes.

 
 a:link {
  color: blue;
  text-decoration:none;
 }

 a:visited {
  color: purple;
  text-decoration:none;
 }

 a:active {
  background-color: yellow;
  text-decoration:none;
 }

 a:hover {
  color:red;
  text-decoration:none;
 }