导航栏帮助：为什么形状显示在"home"上方而不是下方

Question

我正在尝试建立一个在线投资组合。

我想要通知用户他/她在"主页"上的梯度形状；页面显示在单词下方，而不是顶部。基本上，我想好了如何用悬停效果来做到这一点，但不是为了稳定的形状。我希望实心渐变形状与悬停效果形状完全一致。我想我的问题是我的#home id。谢谢你的帮助。

.nav_container {
position: fixed;
top: 0px;
left: 0px;
width: 100vw;
height: 80px;
background-color: white;
margin: 0 auto;
}
.nav_gradient {
top: 0px;
left: 0px;
width: 100vw;
height: 9px;
z-index: 10;
background: linear-gradient(90deg, #717FFF 0%, rgba(68, 210, 255, 0.88) 16.64%, rgba(238, 203, 255, 0.72) 32.02%, rgba(255, 255, 255, 0.01) 50.36%, rgba(238, 203, 255, 0.72) 66.6%, rgba(68, 210, 255, 0.88) 83.96%, #717FFF 100%);
}
ul {
list-style: none;
margin: 0;
padding: 0;
text-align: right;
}
nav li {
display: inline-block;
padding: 15px;
padding-top: 15px;
position: relative;
}
li {
float: left;
}
li:nth-last-child(1) {
float: none;
display: inline-block;
padding-right: 20px;
}
#home {
content: '';
display: block;
height: 9px;
background: radial-gradient(50% 530.72% at 50% 50%, rgba(92, 108, 255, 0.94492) 0%, rgba(68, 210, 255, 0.88) 23.83%, rgba(238, 203, 255, 0.72) 41.81%, rgba(255, 255, 255, 0.01) 100%);
position: relative;
top: 0px;
opacity: 100%;
}
nav a {
color: black;
text-decoration: none;
}
nav a::before {
content: '';
display: block;
height: 9px;
background: radial-gradient(50% 530.72% at 50% 50%, rgba(92, 108, 255, 0.94492) 0%, rgba(68, 210, 255, 0.88) 23.83%, rgba(238, 203, 255, 0.72) 41.81%, rgba(255, 255, 255, 0.01) 100%);
position: relative;
top: 35px;
opacity: 0%;
transition: all ease-in-out 450ms;
}
nav a:hover::before {
opacity: 60%;
}

<div class=n av_container>
<div class=n av_gradient></div>
<nav>
<ul>
<li><a href="#" id="home"> Home</a></li>
<li><a href="#"> Fine Art</a></li>
<li><a href="#"> Digital Art</a></li>
<li><a href="#"> Web & UX Design</a></li>
<li><a href="#"> About </a></li>
</ul>
</nav>
</div>

Answer 1

将其添加到当前代码中。如果你觉得答案有帮助，就给它打分并接受它！

#home::after {
top: 7px;
}