Remove underline from Hyperlink link – HTML, CSS

Hyperlinks allow users to navigate between different pages and websites, seamlessly. A hyperlink usually puts an underline to the text by default. You might want to remove the underline from the hyperlinked text as part of your web design.

Remove Underline from Links – Different Ways

Let’s explore different techniques to remove underlines from hyperlinks;

1. CSS:

The most common and effective way to remove underlines from hyperlinks is by using CSS. Here’s a simple CSS snippet to remove underlines

a {
  text-decoration: none;
}

This CSS code targets all anchor <a> elements and sets the text-decoration property to none, effectively removing the underline.

2. Inline Style:

you can use inline styles directly within the HTML code.

<a style="text-decoration: none;" href="https://CodeInDotNet.com">Visit CodeInDotNet.com</a>

In this example, the style attribute is added directly to the <a> element, specifying ‘text-decoration: none;‘.

3. Pseudo-Classes:

CSS pseudo-classes allow you to define styles for specific states of an element. For hyperlinks, the :hover pseudo-class is commonly used to define styles for when a user hovers over a link. To ensure the removal of underlines even on hover, you can use the following code:

a, a:visited, a:hover, a:active {
  text-decoration: none;
}

This CSS rule targets various states of the hyperlink, ensuring that the underline is removed consistently.