메뉴에서 비슷한 효과를 얻는 방법

Question

부트 스트랩을 사용하여 개발 된 메뉴가 있습니다. 현재 각 줄 아래에있는 각 항목 위에 마우스를 가져갈 때 CSS 전환 효과가 있습니다. 나는 어떻게하면 같은 방향으로 나아갈 수 있는지 알 수는 없지만 다른 방향에서 오는 표제와 전환 효과의 위에.

내가 가진 코드는 지금까지 내가 당신의 도움을 사전에 JSFiddle Here

감사를 만든

.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; 
} 

입니다.

Answer 1

.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/

Answer 2

데모 - http://jsfiddle.net/zpxtre6n/5/이

그냥 그대로 바닥 효과가 있고 싶어 .navbar ul li:before

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