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

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 上添加color: 而不是background-color:。请查看difference between color and background/background-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>