CSS 菜单悬停下划线动画

Question

我试图在菜单项上悬停时创建下划线动画（基于此CodePen）。出于某种原因，悬停时我的所有菜单项都带有下划线，而不仅仅是一个。我只希望悬停的菜单项带有下划线，而不是所有内容。

这是我的代码：

html {
  background-color: #131313;
}

.pages {
  position: absolute;
  margin: 0;
  padding: 0;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 17px;
  list-style: none;
}

.pages li {
  float: left;
  display: inline-block;
  padding: 15px;
}

.pages a {
  color: white;
  text-decoration: none;
}

.pages a:after {
  content: '';
  position: absolute;
  width: 0;
  height: 3px;
  display: block;
  margin-top: 5px;
  right: 0;
  background: #fff;
  transition: width .4s ease;
}

.pages a:hover:after {
  width: 100%;
  left: 0;
  background: #fff;
}

<ul class="pages">
  <li><a href="#top" id="menu-home">Home</a></li>
  <li><a href="#about" id="menu-about">About</a></li>
  <li><a href="#work" id="menu-work">Work</a></li>
  <li><a href="#projects" id="menu-proj">Projects</a></li>
  <li><a href="#connect" id="menu-connect">Connect</a></li>
</ul>

请帮忙！

Answer 1

从.pages a:after 中删除position:absolute。具有absolute 定位的元素不在正常的文档流中。在您的 sn-p 中，您的 100% 宽度将不是 a 的 100%，而是最近相对/绝对定位的父级的 100%（默认为 body；在您的情况下为 ul）。

作为替代方案，您可以将position:relative 设置为li，这样:after 元素将是基础li。

html {
  background-color: #131313;
}

.pages {
  position: absolute;
  margin: 0;
  padding: 0;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 17px;
  list-style: none;
}

.pages li {
  float: left;
  display: inline-block;
  padding: 15px;
  position: relative
}

.pages a {
  color: white;
  text-decoration: none;
}

.pages a:after {
  content: '';
  position: absolute;
  width: 0;
  height: 3px;
  display: block;
  margin-top: 5px;
  right: 0;
  background: #fff;
  transition: width .4s ease;
}

.pages a:hover:after {
  width: 100%;
  left: 0;
  background: #fff;
}

<ul class="pages">
  <li><a href="#top" id="menu-home">Home</a></li>
  <li><a href="#about" id="menu-about">About</a></li>
  <li><a href="#work" id="menu-work">Work</a></li>
  <li><a href="#projects" id="menu-proj">Projects</a></li>
  <li><a href="#connect" id="menu-connect">Connect</a></li>
</ul>

我的解释可能很复杂，所以你可以看看下面的 sn-p。我试图解释定位。

.box {
  width: 100px;
  height: 100px;
}

#parent {
  background: pink;
  width: 200px;
  height: 200px;
}

#child1 {
  position: relative;
  top: 10px;
  left: 10px;
  background: lightgreen;
}

#child2 {
  position: absolute;
  background: lightyellow;
}

<div id="parent" class='box'>
  <!--parent-->

  <!-- relative element stays relative to it's original position but can be shifted-->
  <div id="child1" class='box'>position:relative with "top"and"left" of 10px</div>

  <div id="child2" class='box'>position:absolute</div>
</div>
<!--
notice how yellow box is stays where it should be without "top"&"left" assigned, but it's owerlaping shifted green box
-->