更改边框底部到边框顶部

我想在菜单列表上进行过渡时，我需要将边框底部更改为边框顶部。我该怎么做？更改边框底部到边框顶部

.sliding-middle-out { 
 
\t display: inline-block; 
 
\t position: relative; 
 
\t padding-bottom: 3px; 
 
} 
 
.sliding-middle-out:after { 
 
\t content: ''; 
 
\t display: block; 
 
\t margin: auto; 
 
\t height: 3px; 
 
\t width: 0px; 
 
\t background: transparent; 
 
\t transition: width .5s ease, background-color .5s ease; 
 
} 
 
.sliding-middle-out:hover:after { 
 
\t width: 100%; 
 
\t background: blue; 
 
}

<li class="scroll sliding-middle-out"><a href="#features">Features</a></li>

来源

2015-05-01 Blank

您希望边框从底部过渡到顶部（垂直穿过元素，或者只是淡入/淡入）？或者你想改变哪个边框被彩色/突出显示？ –

而不是使用'：之后'使用'：before' http://jsbin.com/hivetigogu/1/edit –

可以使用:before伪元素，而不是:after伪元素太行显示在（前）你的链接的顶部：

.sliding-middle-out { 
 
\t display: inline-block; 
 
\t position: relative; 
 
\t padding-bottom: 3px; 
 
} 
 
.sliding-middle-out:before { 
 
\t content: ''; 
 
\t display: block; 
 
\t margin: auto; 
 
\t height: 3px; 
 
\t width: 0px; 
 
\t background: transparent; 
 
\t transition: width .5s ease, background-color .5s ease; 
 
} 
 
.sliding-middle-out:hover:before { 
 
\t width: 100%; 
 
\t background: blue; 
 
}

<li class="scroll sliding-middle-out"><a href="#features">Features</a></li>

请注意，该行不是用边框属性制成的，而是用伪元素的背景制作的

来源

2015-05-01 09:06:02

我注意到有人投票。 Downvoter请解释下来投票.. –

我看到;从我身边到掌握'pseudo elements'的一票 –

更改边框底部到边框顶部

回答

相关问题