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

So I'm trying to make a transition/animation appear when you hover over a link. It should be a border-top black and go from left to right as it was a progress bar, so far I can only make it appear from top to bottom. Any idea?

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/

CodePudding user response：

As this is purely a visual clue you could put the black bar in via a pseudo element.

This snippet adds an after pseudo element to the list item on hover and uses CSS animation to get it to grow to the full width with just a top border.

<!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>