css - 悬停时从中心扩展边框顶部

Question

我正在尝试为黄色栏制作动画，就像底部边框上的那样。 (例如，我想摆脱我刚刚放置的边框底部

http://jsfiddle.net/9mfccz6w/1/

.navbar  li{
    display: inline-block;
   border-width:5px;    
   border-top-style:solid;
   border-top-color: white;
}

.navbar li:hover, .navbar li:active{
   border-width:4px;    
   border-top-style:solid;
   border-top-color: #e0b82b;
      -webkit-transform: translateY(-2px);
  -moz-transform: translateY(-2px);
  -ms-transform: translateY(-2px);
  -o-transform: translateY(-2px);
  transform: translateY(-2px);

谢谢

Answer 1

就像你在使用:after一样使用:before，你的代码应该是:

.navbar li:before, .navbar li:after{
  display: block;
  content: '';
  -webkit-transform: scaleX(0.0001);
  -ms-transform: scaleX(0.0001);
  transform: scaleX(0.0001);  
  -webkit-transition: -webkit-transform 250ms ease-in-out;
  transition: transform 250ms ease-in-out;
}
.navbar li:before{
  border-top: solid 3px #e0b82b;
}
.navbar li:after{
  border-bottom: solid 3px #019fb6;
}
.navbar li:hover:before, .navbar li:hover:after{
  -webkit-transform: scaleX(1);
  -ms-transform: scaleX(1);
  transform: scaleX(1);
}

DEMO

注意:我还删除了 .navbar li:hover, .navbar li:active 上的 border-top-color: #e0b82b;。也许您想再做一些更改；)