CSS Animated Underline Links

With CSS you can add some great effects using animation. In this blog, we’ll show you how to animate the links underline feature, the link will have the underline move from right to left, this can also be easily changed to go from left to right by changing only one property.

Hover Over Me

To achieve this animation, we first need to remove the underline from the link using the property text-decoration and setting it to none, we’ll also need to set the position property to relative. You can also set the color for the links as shown in the example below.

a {
  text-decoration: none;
  position: relative;
  color: #3366FF;
}

Now that the link has no underline, we can now apply the following css code using the pseudo element :after to achieve our desired animation. Here you can see that we are using the transition property to display our underline animation. By changing the left property to right, the animation will move from the left to the right. The underline effect is achieved using the border-bottom property where you can set the color, border thickness and border style.

a:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  border-bottom: 2px solid #3366FF;
  transition: 0.4s;
}

The last section of code is needed for when the user hovers over a link, the width property is set to 100%. This setting will change the border to 100% and will help achieve to animation effect, once the user moves the cursor off the link, the property will go back to 0% as in the section above and the underline will disappear.

a:hover:after {
  width: 100%;
}

Well that’s about it for this blog, click the button below to experiment with this animation.

Demo