因此，当您将鼠标悬停在链接上时，我正试图使过渡/动画出现。它应该是一个黑色的边框，从左到右，因为它是一个进度条，到目前为止，我只能让它从上到下出现。知道吗？
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/
由于这纯粹是一条视觉线索，您可以通过伪元素放入黑条。
这个片段在悬停时向列表项添加了一个after伪元素，并使用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>