如何在悬停时向上移动边框？

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元素的高度并在悬停时更改它。