导航栏li a元素hover时ease-in-out过渡动画失效求助

你的过渡效果不生效核心原因是CSS选择器语法错误：li a :hover::after中a和:hover之间多了一个空格，这会让选择器匹配a标签内部子元素的hover状态，而非a标签本身的hover状态，导致过渡触发逻辑失效。

修正后的完整代码 #

CSS代码 #

body {
  margin: 0;
}

.nav-bar {
  width: 100vw;
  background-color: black;
}

.nav-bar-ul {
  list-style: none;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 1em 0;
}

li a {
  text-decoration: none;
  color: white;
  padding-right: 3em;
  position: relative;
}

li a::after {
  content: '';
  position: absolute;
  display: block;
  height: 0.4em;
  width: 0%;
  background-color: white;
  bottom: -1em;
  transition: all ease-in-out 250ms;
}

/* 修正选择器：去掉a与:hover之间的空格 */
li a:hover::after {
  width: 60%;
}

li a:hover {
  color: white;
}

HTML代码（补充修正：普通HTML需用class而非React的className） #

<div>
  <div class="nav-bar">
    <ul class="nav-bar-ul">
      <li><a href="#">Logo</a></li>
      <li><a href="#">Logo</a></li>
      <li><a href="#">Logo</a></li>
      <li><a href="#">Logo</a></li>
    </ul>
  </div>
</div>

修改后，鼠标悬停在导航链接上时，底部白色下划线会正常触发ease-in-out的过渡动画。

内容的提问来源于stack exchange，提问作者Junsoo