Animated Underline Links Using CSS

Animated Underline Links Using CSS

Animated Underline Links Using CSS

hey Friends, In this article I will show you a simple animation effect. You can learn here how to animate the links underline on hover. The link will have the underline move from right to left or left to right, both are easy to set. With Animated Underline Links Using CSS we can make our website cool attractive.

1. First we need to remove the underline from the link. We can remove underline using the text-decoration property.

2. After that using the pseudo element “:after” we can do the animation. In Following code you can see that 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 effect is coming with the border-bottom property where you can set the color, border height, and border style.

3. The last Section needed for when the user hovers over a link, the width property is set to 100%. This will change the border to 100%. Once the user moves the cursor from the link, the property will go back to 0% as in the section above and the underline will disappear.

Section 1

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

Section 2

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

Section 3

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