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.
You are good content writing , but there are no email newsletter for your website !
Honestly, i enjoy coming here to upgrade my knowledge of css, i love what you are doing. thanks
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.
Awesome website. I have always enjoyed reading your articles.
On this page there’s an error with the “position” property link. (http://www.cssportal.com/css-properties/postion.php)
I got a 404 error upon clicking on it.
Thanks!
Thanks for letting me know, the link has been updated.
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 🙁
Thank-you!
Hi! Finally a post that really helped me understanding more about link hover and animations.
Thanks a lot!
Awesome thanks a million.