css - 如何在悬停时上下移动边框？

Question

我想在悬停时从下到上过渡，但无法弄清楚如何使其工作。有什么建议么？

.nav h1 {
  display: inline-block;
  border-bottom: 2px solid #fff;
  padding-bottom: 8px;
  margin: 20px;
}

.nav h1 a:hover::after {
  padding-bottom: -8px;
  transition: 0.5s ease-in;
}

Answer 1

一种实现方法是更改​​bottom: value的值。

/*DEMO*/
*,*::before,*::after{box-sizing: border-box}
div{margin-top:3rem}
/****************************/

h1,
span{
  position:relative
}
h1:after,
span:after{
  content:'';
  position:absolute;
  left:0;
  bottom:-20px;
  right:0;
  border-bottom:2px red solid;
  transition:.5s
}
h1:hover:after,
span:hover:after{
  bottom:0;
  transition:.5s
}

<h1>Example block element</h1>

<div>
  <span>Inline element</span>
<div>

其他可行的方法是设置 :after元素的高度并在悬停时更改它。