2

I am trying to create an underline transition for my menu items. On hover, I want a nice blue underline to start from left to right. I followed the answer in this post.

It works, but the only problem is that since this method sets the width of my li elements to 0, my longer menu items get wrapped into two lines instead of one. This is precisely the problem that a commentor of that solution (CBroe) warned about. He/she suggested to use :after to generate an element after each menu item and position the generated element beneath the link. That way, I can expand and contract the width of that generated element instead and my menu items themselves won't be wrapped.

Any idea how to do this? I'm sorry if this is confusing, I tried my best.

Community
  • 1
  • 1
adrianmcli
  • 1,956
  • 3
  • 21
  • 49
  • I was actually going to manually insert a div beneath each item and modify that instead, but tborychowski's answer works perfectly! – adrianmcli Apr 26 '13 at 09:48

1 Answers1

7

I updated the demo here

and this is the css:

a { text-decoration: none; display: inline-block; }
a:after {
    content: '';
    display: block;
    border-bottom: 1px solid blue;
    width: 0;
    -webkit-transition: 0.5s ease;
            transition: 0.5s ease;
}
a:hover:after { width: 100%; }
Dziad Borowy
  • 12,368
  • 4
  • 41
  • 53