How to Display Underline on Hover for a Link Using CSS?

By default, most browsers underline hyperlinks to indicate that they are clickable. However, if the underline has been removed and you want it to appear only when the user hovers over the link, you can achieve this using CSS. This effect improves readability and provides a clean design while maintaining accessibility.

The CSS text-decoration property can be used to add an underline when a user hovers over a link (<a> tag). Below is the basic CSS code to accomplish this:

</>
Copy
/* Remove underline initially */
a {
  text-decoration: none;
  color: blue;
}

/* Show underline on hover */
a:hover {
  text-decoration: underline;
}

Examples

Example 1. Display Underline on Hover for All Links

In this example, we remove the default underline from all links and display it only when the user hovers over a link.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <style>
    a {
      text-decoration: none;
      color: blue;
    }

    a:hover {
      text-decoration: underline;
    }
  </style>
</head>
<body>
  <p><a href="https://www.example.com">Hover Over Me</a></p>
</body>
</html>

Output:

Example 2. Underline on Hover for Specific Links

In this example, only links with the class .hover-link will display an underline when hovered. Other links will remain unchanged.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <style>
    a {
      text-decoration: none;
      color: green;
    }

    a.hover-link:hover {
      text-decoration: underline;
    }
  </style>
</head>
<body>
  <p><a href="https://www.example.com">Default Link</a></p>
  <p><a class="hover-link" href="https://www.example.com">Underline on Hover</a></p>
</body>
</html>

Output:

Example 3. Adding Underline with Animation on Hover

You can make the underline effect smoother by adding a transition effect using text-decoration-thickness and transition. This example provides a gradual underline appearance on hover.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <style>
    a {
      text-decoration: none;
      color: red;
      position: relative;
    }

    a::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: -2px;
      width: 100%;
      height: 2px;
      background-color: red;
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.3s ease-out;
    }

    a:hover::after {
      transform: scaleX(1);
    }
  </style>
</head>
<body>
  <p><a href="https://www.example.com">Hover for Animated Underline</a></p>
</body>
</html>

Conclusion

Displaying an underline on hover is a simple yet effective way to enhance user experience and improve link visibility. By using text-decoration: underline; on the :hover pseudo-class, you can control when the underline appears. Additionally, you can customize the effect further with animations for a smoother interaction.