html - Nav bar help: Why is the shape appearing above "home" instead of below

Question

I am trying to build an online portfolio.

I want the gradient shape that informs the user that he/she is on the 'Home" page to appear below the word, not on top. Basically, I figured out how to do this with a hovering effect, but not for the stable shape. I want the solid gradient shape to be exactly where the hover-effect one is. I think my problem is with my #home id. Thank you for your help.

.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

Add this to your current code. Rate and accept the answer if you find it helpful!

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