如何使边框过渡从左到右（边框出现在悬停时）

Question

因此，当您将鼠标悬停在 link 上时，我试图让 transition/animation 出现。它应该是一个黑色的边框，从左到右，因为它是一个进度条，到目前为止我只能让它从上到下出现。有什么想法吗？

nav{
    height: 10vh;
    background-color: cyan;
    text-align: right;
}
header nav ul li{
    display: inline-block;
    padding: 2%;
    transition: all 1s;
}
header nav ul li:hover{
    border-top:5px solid black;
}
header nav ul li a{
    text-decoration: none;
    color: black;
    font-weight: bold;
    text-transform: uppercase;
}

https://jsfiddle.net/de36a287/

Answer 1

由于这纯粹是视觉线索，您可以通过伪元素将黑条放入。

此代码段在悬停时向列表项添加一个伪元素，并使用 CSS 动画使其增长到全宽，只有一个顶部边框。

<!DOCTYPE html>
<html>

<head>
  <meta charset='utf-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <title>Page Title</title>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
  <style>
    nav {
      height: 10vh;
      background-color: cyan;
      text-align: right;
    }
    
    header nav ul li {
      display: inline-block;
      padding: 2%;
      transition: all 1s;
      position: relative;
    }
    
    header nav ul li:hover::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      height: 0;
      width: 0;
      z-index: 1;
      border-top: 5px solid black;
      animation: grow 1s linear;
      animation-fill-mode: forwards;
    }
    
    @keyframes grow {
      100% {
        width: 100%;
      }
    }
    
    header nav ul li a {
      text-decoration: none;
      color: black;
      font-weight: bold;
      text-transform: uppercase;
    }
  </style>
</head>

<body>
  <header>
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Pricing</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </header>
</body>

</html>

如何使边框过渡从左到右（边框出现在悬停时）

How to make border transition go left to right(the border appears on hover)

css

css-animations

css-transitions