如何使边框过渡从左到右（边框出现在悬停时）
Posted
技术标签:
【中文标题】如何使边框过渡从左到右（边框出现在悬停时）【英文标题】：How to make border transition go left to right(the border appears on hover) 【发布时间】：2022-01-21 03:19:26 【问题描述】：因此，当您将鼠标悬停在链接上时，我试图让过渡/动画出现。它应该是一个黑色边框，从左到右，因为它是一个进度条，到目前为止我只能让它从上到下出现。有什么想法吗？
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/
【问题讨论】：
请阅读***.com/help/minimal-reproducible-example 【参考方案1】：由于这纯粹是一个视觉线索，您可以通过伪元素将黑条放入。
这个 sn-p 在悬停时向列表项添加一个 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>【讨论】：
以上是关于如何使边框过渡从左到右（边框出现在悬停时）的主要内容，如果未能解决你的问题，请参考以下文章