Animated Underlined Links Made Easy in CSS

CSS is a very rich tool for adding several things, including animations, colors, fonts, and much more, including animated underlines on hover. We are going to see how to easily implement this technique now. 

You will need to specifically target the element you want to add this effect to. If you were to simply target all "a" elements, every link on your site would use this effect. 

The first thing we need to do is turn off text-decoration, and set the links  to . For simplicitiy's sake, we'll also make sure the link doesn't change color on hover. Here we're applying the effect to all link elements inside our nav class:

.nav > a { position: relative; color: #000; text-decoration: none; }

.nav > a:hover { color: #000; }

Next, we want to add the border, and hide it through a transformation. We do this by inserting it with , and setting its X scale to . As a fallback, we hide it with  for browsers that don't support CSS animations:

.nav > a:before { content: ""; position: absolute; width: 100%; height: 2px; bottom: 0; left: 0; background-color: #000; visibility: hidden; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; }

At the very bottom we tell the element to animate all changes applied to it, with a duration of seconds. For the animation to appear, now we just need to make the element visible again on , and set its X scale back to :

.nav > a:hover:before {
visibility: visible; -webkit-transform: scaleX(1); transform: scaleX(1); }

 That's it! You can use this to target any link elements on your site. It's an amazing look! Have fun!