Animated Link Underlines w/ Pure CSS

Recently I’ve been making some updates to my blog’s theme to make it simpler and cleaner.

One of the changes that I made was to add a small animation to the hover effect of the main menu. Subtle animations can go a long way to adding polish and quality to your UI/UX designs, and with the help of CSS3, many of these animations can be done with pure css.

In this case, I wanted to add a bottom border to each menu item that ‘opened’ when a user hovers over the link. This technique can be used for any type of text link on your website, and it’s relatively easy to create a class for this behavior.

Here’s an example of a link with this behavior:

This is a fake link – hover over me to see the animation

To start, let’s take a look at how my theme (based on reverie3) renders the main menu items:

Notice in the example that the third list item (for “Contact”) has the class active. This will always be the current menu item (if available).

Previously, the menu had a hover effect and active class that simply added a border to the bottom of the active menu item, and changed the colour of the menu text:

Now, to add my animation there were a few options, but the easiest is to use the CSS Pseudo element :after to both add the underline, and animate it.

First, we’ll change the selector for the border to be the new pseudo element:

This code will create a new pseudo element underneath our list item li elements that will contain our border. As it stands, the border will appear for all list items however. So instead, we want the default to be an invisible border:

Adding the width attribute will make the border invisible for all elements. Now we want to make sure that the border displays on our active and hover elements:

Great! Now we’re back to the same functionality as we had at the beginning. A link that when hovered or active, has a border-bottom of 2px. But we still need to animate the border when a visitor hovers over the element. To do so, we can use CSS3’s transition attribute:

By adding a transition to the element, a visitor’s browser will automatically calculate the animation for you, without the need for javascript or any other scripting. I’ve also added the margin: 0 auto; to the li element to make sure that the animation starts from the center instead of from the left side.

The final result will be what you see on the main menu of this blog. To turn this into a class structure that you can use on your own website, you can simply write your css like this:

I hope this helps in your projects. Let me know if you have any questions in the comments below!

Share on FacebookTweet about this on TwitterShare on Google+

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">