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

9 Responses to CSS Animated Underline Links

  1. Frostybot says:

    Hi Rene,

    This is a great introduction to CSS animations.

    Just wanted to let you know, you have a grammar problem in your second paragraph. “we can know apply the following css code using the pseudo element” (“know”, should be “now” or just removed).

    Hope this helps future readers.

  2. Sinrise says:

    This is really cool and I see this solution a lot but it’s not reliable if you have links that break onto another line, or you’re tying to add a link to an H1 element or similar. It seems we’re still in CSS purgatory when it comes to text decoration… much like we are with HTML forms and emails :(

Leave a Reply to Andre Cancel reply

Your email address will not be published. Required fields are marked *