Display Animated Underline on Hover for a Link Using CSS

Adding an animated underline effect on hover makes links more engaging and enhances user experience. Instead of a static underline appearing immediately, you can create a smooth transition effect using CSS animations. This technique is widely used in modern web designs to provide a visually appealing interaction.

You can achieve an animated underline effect using the ::after pseudo-element combined with the transform and transition properties in CSS. Below is a basic example of how to do this:

</>
Copy
/* Base link styling */
a {
  text-decoration: none;
  color: blue;
  position: relative;
}

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

/* Animate underline on hover */
a:hover::after {
  transform: scaleX(1);
}

Examples

Example 1. Simple Animated Underline on Hover

In this example, we apply an animated underline that grows from left to right when a user hovers over the link.

index.html

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

    a::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: -2px;
      width: 100%;
      height: 2px;
      background-color: blue;
      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 Over Me</a></p>
</body>
</html>

Output:

Example 2. Animated Underline Growing from Center

In this variation, the underline starts from the center and expands outward to both sides, giving a unique effect.

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: 50%;
      bottom: -2px;
      width: 0;
      height: 2px;
      background-color: red;
      transition: width 0.3s ease-out, left 0.3s ease-out;
    }

    a:hover::after {
      width: 100%;
      left: 0;
    }
  </style>
</head>
<body>
  <p><a href="https://www.example.com">Hover Over Me</a></p>
</body>
</html>

Output:

Example 3. Dashed Animated Underline Effect

This example creates a dashed underline effect that appears on hover, using the border-bottom property instead of ::after.

index.html

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

    a:hover {
      border-bottom: 2px dashed green;
      transition: border-bottom 0.3s ease-out;
    }
  </style>
</head>
<body>
  <p><a href="https://www.example.com">Hover Over Me</a></p>
</body>
</html>

Conclusion

Creating an animated underline effect on hover using CSS is a simple yet powerful way to enhance link styling. By using ::after with transform and transition, you can create smooth effects like growing from the left, center, or even adding dashed underlines.