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 {
content:'';
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 {
    content:'';
    display: block;
    position:absolute;
    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%; }

http://jsfiddle.net/RokoCB/zpxtre6n/4/


    CSS Howto..

    CSS Clouds - How to adjust to inner content?

    How to overlay image with color in CSS?

    How to render css code from php var without page refresh?

    How to increase or decrease space between two lines in same paragraph?

    How to get rid of background when something is clicked

    How to use css in asp.net for web server control?

    How do I get my List Items to move up a Little in CSS

    How to apply CSS styles only to the text-content of a block-level element?

    How can i integrate php to html table

    css How can I make the page body stay the same size even if I add element to it?

    How can I get IE7 to see an HTC file in the same directory as my CSS?

    Why my tabs (i.e HOME, ABOUT ME..) doesn't show the corresponding paragraph or section?

    How to offset content under a navbar when using height:100%?

    How can I apply a CSS class to an element with a given id, without modifying the element?

    How to enable auto indentation in lists and list items?

    How to reference css and script files into a node.js app?

    How to vary the tone of an image dynamically using only css?

    Mojolicious Tests: How to get the input value using css-selectors

    How to apply bootstrap css to all buttons

    how do i edit my CSS to show following things please [closed]

    CSS help - how to keep my div in place with a responsive design

    How to add two images one in the right and other in the left side of the input textbox?

    CSS selector: How to select element sibling AND element itself?

    How to rotate an object 120deg on every click with CSS-transition/transform throu JS

    How should you comment css? [closed]

    How can i stop a child div moving towards left when browser size becomes less than webPage size?

    How to format CSS for 8.5x11 inch printed pages

    How to align a list to an image, and jquery problems

    How does Facebook generate the animated placeholder news items?

    How to include a css stylesheet in Orchard module?