How to move border-bottom up on hover?

Question

I want to transition border-bottom up on hover but cannot figure out how to make it work. Any suggestions?

.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

One way to achieve that is to change the value of 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>

Other method that may work is to set height of :after element and change it on hover.

Answer 2

here is the simplest version transition of the border-bottom up 8px on hover (as asked by you)

     body {background-color: #eee;}
    .nav {
      width: 100px;
      height: 100px;
      display: inline-block;
      border-bottom: 2px solid #fff;
      margin: 20px;
      background: #ddd;
      transition-duration: 0.5s;
    }
    
    .nav:hover {
      width: 100px;
      height: 92px;
    }

<h1 class="nav"></h1>

Answer 3

Hi Try using the following code:

h1.nav {
border-bottom: 2px solid red;
    display: inline-block;
    line-height: 40px;
    padding: 5px;
    margin: 5px;
}

h1.nav:hover {
    line-height: 20px;
    transition: all 1s ease-in;
}

<h1 class="nav">Hey</h1>
<h1 class="nav">hello</h1>
<h1 class="nav">Hey</h1>

Hope this was what you intended to do. If not please elaborate more.