why isn't the hover effect working in the given code?

Question

I was making a hover effect for all the list items to have an underline emerging from the center, and I've made something like this earlier too, but there is some problem because of which it's not happening. I've attached the HTML and css, could someone help me figure out what's wrong?

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

nav {
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 10vh;
  font-family: 'Josefin Sans', sans-serif;
}

.logo {
  font-family: 'Abril Fatface', cursive;
  font-size: 2rem;
}

.logo a {
  text-decoration: none;
  color: #000;
}

.nav-links {
  display: flex;
  width: 40%;
  justify-content: space-around;
}

.nav-links li a {
  text-decoration: none;
}

.nav-links li {
  list-style: none;
  font-size: 25px;
}

.nav-links li a::after {
  content: '';
  display: block;
  height: 2px;
  color: #1ebbd7;
  margin: auto;
  display: none;
  transition: 0.5s;
}

.nav-links li a:hover::after {
  width: 80%;
}

<!--NAVBAR-->
<nav>
  <div class="logo">
    <a href="index.html">
      <h1>The Bakery.</h1>
    </a>
  </div>
  <ul class="nav-links">
    <li>
      <a href="#">About</a>
    </li>
    <li>
      <a href="#">Order</a>
    </li>
    <Li>
      <a href="#">Recipes</a>
    </Li>
  </ul>
</nav>

Answer 1

You have both display:none and display:block on :after . Why is that ? You just need display:block. display none/block

Second, you add color: on :after instead of background-color:. Please check the difference between color and background/background-color

Third, you need to specify an initial width on after . Eg width:0%

Check code below

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

nav {
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 10vh;
  font-family: 'Josefin Sans', sans-serif;
}

.logo {
  font-family: 'Abril Fatface', cursive;
  font-size: 2rem;
}

.logo a {
  text-decoration: none;
  color: #000;
}

.nav-links {
  display: flex;
  width: 40%;
  justify-content: space-around;
}

.nav-links li a {
  text-decoration: none;
}

.nav-links li {
  list-style: none;
  font-size: 25px;
}

.nav-links li a::after {
  content: '';
  display: block;
  height: 2px;
  background-color: #1ebbd7;
  margin: auto;
  width:0%;

  transition: 0.5s;
}

.nav-links li a:hover::after {
  width: 80%;
}

 <nav>
   <div class="logo"><a href="index.html">
       <h1>The Bakery.</h1>
     </a></div>
   <ul class="nav-links">
     <li>
       <a href="#">About</a>
     </li>
     <li>
       <a href="#">Order</a>
     </li>
     <Li>
       <a href="#">Recipes</a>
     </Li>
   </ul>
 </nav>