将边框底部更改为边框顶部答案

【问题标题】：Changing border-bottom to border-top将边框底部更改为边框顶部
【发布时间】：2015-05-01 09:03:46
【问题描述】：

我想在悬停时在我的菜单列表上进行转换，但我想将边框底部更改为边框顶部。我该怎么做？

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

 &lt;li class="scroll sliding-middle-out"&gt;&lt;a href="#features"&gt;Features&lt;/a&gt;&lt;/li&gt;

【问题讨论】：

您希望边框从底部过渡到顶部（垂直穿过元素，或者只是淡出/淡入）？或者您想更改哪个边框被着色/突出显示？
而不是使用:after 使用:before jsbin.com/hivetigogu/1/edit

标签： css css-transitions pseudo-element

【解决方案1】：

您可以使用:before 伪元素代替:after 伪元素，以便该行显示在您的链接顶部（之前）：

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

&lt;li class="scroll sliding-middle-out"&gt;&lt;a href="#features"&gt;Features&lt;/a&gt;&lt;/li&gt;

请注意，这条线不是用border属性而是用伪元素的背景制作的

【讨论】：