css - 如何在菜单上获得类似的效果

Question

我有一个使用 bootstrap 开发的菜单。当前，当您将鼠标悬停在每个标题下的每个元素上时，它具有 CSS 过渡效果。我似乎无法弄清楚如何在标题和来自另一个方向的过渡效果之上做同样的事情。

我目前的代码是

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

我创建了一个 JSFiddle Here

预先感谢您的所有帮助。

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/