html - CSS 网格：使用 ::after 下划线效果来适应网格项目

Question

我正在使用::after伪选择器在导航项下创建下划线动画。我遇到的问题是宽度不适合子元素（标签），而是网格单元格的整个宽度。理想的情况是动画在到达单词末尾时停止，同时仍保持网格单元格中的原始位置。

#nav-bar li a::after我尝试使用 CSS 选择器::after（

* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
  color: black;
  font-family: 'Source Sans Pro', sans-serif;
}

#header {
  margin: 2rem 0 4rem 0;
  padding: 0 2rem;
  font-size: 0.875rem;
  text-align: left;
}

#nav-bar {
  display: inline-grid;
  grid-template-columns: repeat(5, 12.5%) 1fr;
  grid-template-rows: 2rem;
  width: 100%;
  padding: 2rem;
}

#nav-bar li {
  position: relative;
  margin: auto 0px;
}

#nav-bar li a::after {
  content: "";
  display: block;
  background-color: #000;
  width: 0;
  height: 1px;
  transition: ease-in-out 0.5s;
}

#nav-bar li a:hover::after {
  width: 100%;
  transition: ease-in 0.5s;
}

<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap" rel="stylesheet">


<ul id="nav-bar">
  <li id="home">
    <a href="">
            Home
        </a>
  </li>
  <li>
    <a href="">
            About
        </a>
  </li>
  <li>
    <a href="">
            Services
        </a>
  </li>
  <li>
    <a href="">
            Contact
        </a>
  </li>
</ul>

强文本

标签： htmlcss

Answer 1

只需将 inline-block 添加到锚点。

#nav-bar li a {
    display: inline-block;
}