悬停在Flexbox中仅在文本下划线 [英] Hover underlining only text within a flexbox

问题描述

我试图在使用 flexbox 制作的垂直 nav 上的下划线上进行 hover 的工作.在没有 的水平 nav 上， hover 的下划线可以正常工作，但是一旦添加了 flexbox 的下划线范围整个框，而不是仅在文本下方.

I'm trying to get an underline to work on hover on a vertical nav made with flexbox. On a horizontal nav without flexbox the hover underline works fine, but as soon as flexbox is added the underline spans the entire box rather than just under the text.

看看下面的第一个代码片段如何按预期工作，但是一旦我在第二个代码片段中使用 flexbox 使 main_nav 垂直时，下划线就会中断.

See how in the first snippet below it works as intended but as soon as I make main_nav vertical with flexbox in the second snippet the underline breaks.

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

How can I fix this so it underlines correctly while keeping the nav vertical?

#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>

推荐答案

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

这篇关于悬停在Flexbox中仅在文本下划线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！