悬停仅在 flexbox 中的文本下划线

Question

我正在尝试在使用 flexbox 制作的垂直 nav 上添加下划线以在 hover 上工作。在没有 flexbox 的水平 nav 上，hover 下划线工作正常，但一旦添加 flexbox，下划线就会跨越整个框，而不仅仅是在文本下方。

在下面的第一个代码段中查看它是如何按预期工作的，但是一旦我在第二个代码段中使 main_nav 与 flexbox 垂直，下划线就会断开。

如何解决这个问题，使其在保持 nav 垂直的同时正确下划线？

#wrapper {
  width: 100%;
  height: 300px;
  background-color: black;
}


#wrapper #main_nav {
  //display: flex;
  //flex-direction: column;
}

.nav_item {
  text-decoration: none;
  color: white;
  display: inline-block
}

.nav_item:after {
  display: block;
  content: '';
  width: 0;
  height: 2px;
  background-color: white;
}

.nav_item:hover:after {
  width: 100%;
  transition: width 150ms ease-in;
}

<div id="wrapper">
    <nav id="main_nav">
      <a href="#" class="nav_item">Item1</a>
      <a href="#" class="nav_item">Item2</a>
      <a href="#" class="nav_item">Item3</a>
      <a href="#" class="nav_item">Item4</a>
    </nav>
</div>

#wrapper {
  width: 100%;
  height: 300px;
  background-color: black;
}


#wrapper #main_nav {
  display: flex;
  flex-direction: column;
}

.nav_item {
  text-decoration: none;
  color: white;
  display: inline-block
}

.nav_item:after {
  display: block;
  content: '';
  width: 0;
  height: 2px;
  background-color: white;
}

.nav_item:hover:after {
  width: 100%;
  transition: width 150ms ease-in;
}

<div id="wrapper">
    <nav id="main_nav">
      <a href="#" class="nav_item">Item1</a>
      <a href="#" class="nav_item">Item2</a>
      <a href="#" class="nav_item">Item3</a>
      <a href="#" class="nav_item">Item4</a>
    </nav>
</div>

Answer 1

使用display: inline-flex;代替块级的display:flex;。

Answer 2

默认情况下，flexbox stretch 个项目。
对于 flex-direction: column 配置，您必须添加 align-items: flex-start 来修复它。

#wrapper #main_nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

悬停仅在 flexbox 中的文本下划线

Hover underlining only text within a flexbox

html

css

nav

flexbox