How to get similar effect on menu

Tags: css,twitter-bootstrap

Problem :

I have a menu which is developed using bootstrap. Currently it has a CSS transition effect when you hover over each item I line is placed under each heading. I can't seem to figure out how can I do the same but on top of the heading and the transition effect coming from the other direction.

The code I have so far is

.navbar ul li:after {
display: block;
height: 4px;
width: 0;
transition: width .6s ease, background-color .6s ease;
.navbar ul li:hover:after {
width: 100%;
background: #fff;

I have created a JSFiddle Here

Thanks in advance for all your help.

Solution :

.navbar ul li:before,
.navbar ul li:after {
    display: block;
    height: 4px;
    width: 0;
    background: #fff;
    transition: width .6s ease, background-color .6s ease;
.navbar ul li:before{ top:0;    right:0; }
.navbar ul li:after { bottom:0; left:0;  }

.navbar ul li:hover:before,
.navbar ul li:hover:after{ width: 100%; }

    CSS Howto..

    How to Position an Image underneath a form in CSS

    How to take control of style sheets in ASP.NET Themes with the StylePlaceHolder and Style control

    How to refactor CSS based on HTML class

    how to limit the size of image that gets submitted with a box

    How to apply direction css attribute in list elements

    How to get only the last ul of specific id on page via CSS :last-child property?

    How do I confer CSS properties upon elements retrieved from $.ajax()?

    How to position an element relative to the background image width

    How to do something like #Card%{ } in CSS

    How to add hover effect to menu using jQuery

    How can `animation-play-state` in CSS be initially set to `paused` and changed to `running`?

    How to change the color of a div in css when another one is on focus

    How to specify which element to change background color jquery

    CakePHP call really old css file. How to refresh

    how can I center the image in my div? (so far the left border of my img is centered)

    How to make flash movie to scale proportunatly to div width?

    how to remove the css overflow:hidden of jquery dialog

    How can I get rid of the the gap below absolutely positioned content?

    Show dropdown menu only when hovered on span in li

    How to fix a footer overlay on main in HTML

    How do I move the background image of a DIV based on the scrollbar movement?

    How can I add a default to my CSS slide show banner?

    how to reduce the size of all component in sencha application

    Resharper: How to suppress inspection errors resulting from CSS hacks?

    How to push up text in CSS?

    How to display certain content underneath another block of content

    How to separate image folder and css folder to work with eachother in maven project

    How do you use nth-child(odd) on table rows but you want some rows to be exempted from the css rule?

    How to create popup panel using JavaScript & CSS, no libraries?

    How to change text in the same area when hover over images with CSS?