将下边框更改为上边框

Question

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

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

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

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

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

请注意，该行不是使用 border 属性创建的，而是使用伪元素的背景创建的