为什么悬停效果在给定代码中不起作用？

Question

我正在为所有列表项制作一个悬停效果，使中心出现一条下划线，我之前也做过类似的东西，但有一些问题导致它没有发生。我附上了 HTML 和 css，谁能帮我找出问题所在？

* {
  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

您在 :after 上同时拥有 display:none 和 display:block。这是为什么？你只需要display:block。 display none/block

其次，您在 :after 而不是 background-color: 上添加 color:。请检查

第三，您需要在 after 上指定一个初始宽度。例如width:0%

检查下面的代码

* {
  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>

为什么悬停效果在给定代码中不起作用？

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

html

css

hover