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

Answer 2

这是最简单的版本悬停时边框底部过渡8px（按您的要求）

     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

嗨，尝试使用以下代码：

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>

希望这就是您想要做的。如果没有，请详细说明。

Answer 4

这是如何在悬停时向上移动边框底部的简单示例

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 5

您可以考虑使用简单的背景来创建边框并使用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>

您也可以从下到上过渡

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

如果您想将边框向上移，请使用height而不是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>

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

6 个答案: