CSS Sliding Underline

  • follow us in feedly
Published August 7, 2013 by Brad Knutson
Sliding CSS Underline

I’ve seen a few blogs that use a neat effect that is only starting to be utilized around the web – underlines with CSS transitions. We’ve all seen sites that have navigation menus with underlines that fade in and fade out on hover, but what about other animations? What about moving, or sliding, underlines?

It is possible, as most things are, with CSS3. It’s not really that complicated either, it just takes a little bit of planning and finesse.

The key is to not think of these as “underlines” but rather a similar CSS property – the good old border-bottom.

Let’s take a look at some examples.

First, let’s go over the typical example that is fairly common across sites and blogs.

Underline – Top to Bottom

Hover over the h3 above. The underline will start with a thickness of 0, and grow to 3px (in this case). You’ll notice that it also manipulates the DOM and moves everything else on the page down 3px. This is because of the style I used, and could be avoided by using position: absolute; or other techniques, but for the sake of brevity I thought I would leave it as is.

Or, you could accomplish this another way (example courtesy of Josh Broton). In this example, we use pseudo-elements and don’t need to account for the border-bottom at all. Another reason this is a great example is because it doesn’t require a set width.

Underline – Top to Bottom

Now how about the example of an underline sliding from the left to the right?

Underline – Left to Right

Go ahead, hover over the h3 above.

This underline will fade in and slide from the left to the right. Clearly we are using CSS transitions here, but how exactly are we accomplishing this effect?

Let’s think about this for a moment. If we want an underline to start from nothing, and grow to a full width, what CSS would be required? Why don’t we set a width of 0, and change it to a pre-determined length on hover?

That works.

The reason this works is because we set white-space: nowrap;. Because the initial width is 0, the h3 would have broken on any empty character. We could have replaced the spaces with   but not all CMS’ would allow a developer or blogger to do that.

So, like in the initial example, we are starting with an underline that is technically there (but not visible) and using CSS transitions to grow it.

Another way of accomplishing this is using pseudo-elements. Thanks again to Josh Broton for taking the time to figure this out! This might even be a better option than my example above, because it allows you to have variable sized elements without having to hard code a width.

Underline – Right to Left

Big thanks to Josh Broton for using his brain and figuring this one out!

Underline – Middle Out

Underline – Slide In, Slide Off

Credit for this example goes to Dion Dirza for pointing out this awesome example!

Underline — Slide In, Slide Off (Inverse)

Have a better way of accomplishing this? Leave a comment below!

The following two tabs change content below.
Founder at Inbounderish
Brad Knutson is a Web Developer in the Twin Cities area of Minnesota. He has experience working with WordPress and Drupal, and also has an interest in SEO and Inbound Marketing.

Keep Up-to-Date



See a complete list of topics discussed in blog posts here.

Check These Out

Get 2 Weeks Free! Sign Up Today! Premium Managed WordPress Hosting Genesis Framework for WordPress SEO is complex. Tools should be simple. Thesis Theme for WordPress:  Options Galore and a Helpful Support Community

40 thoughts on “CSS Sliding Underline

  1. Josh Broton

    Brad, thanks for the writeup. This is a sweet effect. You got me messing with pseudo-elements and I came up with a way to do what you’re doing without messing with the width of the actual element. Of course, this method doesn’t include IE7 support like yours does (at least the change — obviously not transition).

    1. Brad Knutson Post author

      Good call! Pseudo-elements are absolutely another way to accomplish this effect (and maybe a better option).

      Any thoughts on creating a ‘right-to-left’ effect?

    2. Josh Broton

      I think this should do the trick, but a comment form in a browser’s not the best code writing/testing environment 😉

    3. Brad Knutson Post author

      Awesome! This is along the lines of what I thought it would take to accomplish it. Thanks for taking the time to figure it out! Credit given where credit is due!

    1. Brad Knutson Post author

      The “top to bottom” sliding example can be found on Paulund (main navigation menu) and I got the inspiration for the “left to right sliding example from a combination of Paulund and CSS Tricks (links at the bottom of the page – not really a sliding underline, but hover over them and you’ll see where my inspiration came from).

      I would be interested to know of any other sites that use similar CSS!

    1. Josh Broton

      This was actually a really fun one.

    2. Brad Knutson Post author

      Ah, Josh beat me to it! I also found another way that seems to work.

  2. Alan Aurmont

    Twitter just rolled out a major redesign to user profiles on the web. Do you guys think you could achieve their new rollover effect? It’s similar to your first example except that it’s bottom-to-top and with no text elevation on hover. I’d really appreciate your help. Thank you in advance.

    1. Brad Knutson Post author

      Hey Alan – I’m not sure what hover effect on Twitter you’re referring to, but does Josh’s solution to the top-to-bottom not work as you intend?

    2. Brad Knutson Post author

      Gotcha – how about this:

  3. Dion Dirza

    Excellent, this what I looking for, I have another animation Brad, imagine an underline show up from left to right while hover on, when hover off underline vanish from left to right. its more likely keep move forward animation rather than forward and backward animation..

    1. Dion Dirza

      after a little bit experiment, i just come up with this :

    2. Brad Knutson Post author

      That’s awesome Dion! Thanks for sharing, I’ve added it to the post above :)

  4. Christoph Papes

    Hey Guys!
    First of all thanks for the awesome effects. I have one problem right now, I think it’s just a faulty reasoning.
    I am actually making my website and I use the Middle Out effect for my header. All I want is that the link of the active website (the website where you are currently ) is always underlined. Can you please help me doing this? I hope you know what I mean and sorry for the english, I’m from Austria 😉

    1. Brad Knutson Post author


      Add a class to the navigation item that you are currently on (like “current”), then apply unique styles to .current {} that will take show the underline at all times and not just on hover. You’ll need some sort of server-side code (or Javascript) to add the new class to the menu item if you’re currently on that page. For example, on this site, if you click through to on any of the main navigation pages, the menu item gets a unique class "current-menu-item".

      Hope that helps!

  5. Bill

    Great post. Thanks to everyone for all these examples. I’ve got one I saw recently but I don’t know if you can do it.
    On hover the line appears below about 4-5px and then moves/slides up to normal position.

  6. Alan Aurmont

    Hi Brad,

    Do you think you could write the code for the inverse effects? In other words, let the links be underlined normally and execute the animation on hover.

    Thanks in advance,

    1. Brad Knutson Post author

      Hey Alan,

      All you should need to do is switch around the height or width of the “underline” segment. In the examples above, the top-to-bottom and bottom-to-top animations will start with a height of 0, and on hover will change to 3, or whatever height you want. In the side-to-side animations it’s the width that you want to switch around.


    2. Alan Aurmont

      Hi Brad,

      OMG, I’m such a noob, I can’t seem to figure it out; tried switching around the width but didn’t work. I’m using the last animation, slide in and out.

      Thanks in advance,

    3. Brad Knutson Post author

      Try this:

      I updated the post with this example.

  7. Chris Newcombe

    Great post, thanks a lot! I could use a bit of help with my implementation! I have an image with text underneath it and I’m trying to have the underline appear under the text if the text or image are rolled over, any ideas?

    This is what I have and it’s not quite working;

    Lake Minnewanka

    1. Dion Dirza

      Its simple, you might wrap your image and text inside a div and add css for that div on hover state.
      You can look my example right here

    2. Alan Aurmont

      Hi Brad,

      I was wondering if you’ve seen Mary Lou’s creative link effects on Codrops (link: http://tympanus.net/codrops/2013/08/06/creative-link-effects).

      For the past 2 days, I’ve been trying to get them to work (on Tumblr, Squarespace, etc.) but alas, no luck. I just can’t understand what I’m doing wrong.

      Is there any way you could help me? I just need a hint. Or could you perhaps test the effect #11 yourself? I’d really appreciate it. Thank you so much.


  8. Kenwin

    Hi Brad,
    Is there a way to make 2 lines run simultaneously? I want to make a line on top of word/box from left to right and a line on bottom from right to left.




Share Your Thoughts

Your email address will not be shown.

You may use these HTML tags and attributes: <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="">