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

Question

我想在悬停时在我的菜单列表上进行转换，但我想将 border-bottom 更改为 border-top。我该怎么做？

  .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 伪元素，因此该行显示在您的 link:

之上（之前）

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

请注意，这条线不是用边框属性而是用伪元素的背景

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

Changing border-bottom to border-top

css

pseudo-element

css-transitions