Animated underline hover status using CSS

Underlining text can be great for highlighting or drawing attention to certain words or phrases, but on a website, wouldn’t it be awesome if we could animate that underline? If you hover over my site menu above, you’ll see that each menu item has an animated underline hover status.

To create this effect is fairly easy. We can create this effect without any JavaScript, but all of my styling will be in SCSS. If you don’t want to use SCSS, then view the demo below in CodePen and you’ll be able to toggle between CSS and SCSS.

Create the list

Firstly, we are going to create our list of items to animate. We are going to be using an unordered list. You can use whatever you want.

Set the layout

Next thing on the list is to set the list to look more like a menu. For this, we are using Flex. Because we are using SCSS, and in a dev environment, I’ll be ignoring all the vendor prefixes.

Styling the links

Now that it is looking more like a menu, we need to start styling the links. We’ll add the link tags within the li {} brackets.

What we’ve done is simply give the font some weight, adding some padding and removed any default text styling. We wouldn’t want the default link underline style appearing behind or above our soon to be added animated underline.

Something worth noting when creating a menu, is that it is always best to add any padding used for spacing to the actual link, and make sure the link is using either display: inline-block; or display: block;. The reason for this is that it will give you a bigger clickable coverage area, which is good for things like mobile usability. You want to make it easier for visitors to click on links, and people will assume that the space in-between links is clickable.

Adding the underline

Before we move onto the actual animate part, we need to build the underline first. We do this using an :after pseudo element.

Again, add the following script within the previously created a {} code.

A quick explanation of what is happening in the above code, starting from the top. As with any pseudo element, you have to give it content for it to display. We are just making it an empty string for now so that it displays on the page. We have to set the position as absolute so that it can animate and move freely away from other elements. The height is the thickness of the underline, so adjust this as you see fit.

We started off with a with of 100% of it’s parent element, but have removed 30px from that so that it doesn’t seem oversized, and in this style, -30px makes the underline just a little bit wider than the text above.

The transition is the speed and smoothness of the animation. This is the part you would modify to change the way the underline appears and disappears.

Lastly, we have the background as the underline colour, the left set to 50% so that it appears in the middle, and then lastly the transform. The transforms first part is to make sure that no matter what the with, our middle stays in the middle. Essentially, it’s saying is “my left position minus half of my width”.

The scale is the changeable part here. Setting the scale to 0 here set’s it’s off position. We’ll alter this in the next part to create the animation effect.

Underline animation on hover

The last bit of code again goes within the a tag. We make use of the & attribute to target the same link, changing the scale from 0 to 1, making it full size.

Demo

Conclusion

Nice and simple way to add an animated underline effect on anything. This effect could be applied in other cases as well. It doesn’t have to be used as an underline. Because of the pseudo nature of the underline, you could create any shape with it. Can you put it to good use?