How to move border-bottom up on hover? - css

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.

Answer 4

You can consider a simple background to create the border and easily adjust the position using background-position
.box {
font-size:30px;
padding:8px 0;
display:inline-block;
background:linear-gradient(red,red) no-repeat;
background-size:100% 1px;
background-position:bottom 2px left 0;
transition:0.5s;
}
.box:hover {
background-position:bottom 20px left 0;
}
<div class="box"> some text </div>
You can also transition from bottom to top
.box {
font-size:30px;
padding:8px 0;
display:inline-block;
background:linear-gradient(red,red) no-repeat;
background-size:100% 1px;
background-position:bottom;
transition:0.5s;
}
.box:hover {
background-position:top;
}
<div class="box"> some text </div>

Answer 5

Here is Simple example of How to move border-bottom up on hover
li {
margin-bottom: 10px;
}
.cool-link {
display: inline-block;
color: #000;
text-decoration: none;
}
.cool-link::after {
content: '';
display: block;
width: 0;
height: 2px;
background: #000;
transition: width .3s;
}
.cool-link:hover::after {
width: 100%;
//transition: width .3s;
}
<ul>
<li><a class="cool-link" href="#">A cool link</a></li>
<li><a class="cool-link" href="#">A cool link</a></li>
<li><a class="cool-link" href="#">A cool link</a></li>
</ul>

Answer 6

If you want to move the border higher then use height instead of line height
h1.nav:hover {
height: 0px;
transition: all 1s ease-in;
}
h1.nav {
border-bottom: 2px solid red;
display: inline-block;
height: 40px;
padding: 5px;
margin: 5px;
}
<h1 class="nav">Hey</h1>
<h1 class="nav">hello</h1>
<h1 class="nav">Hey</h1>