Flexbox：使用:: after元素悬停时按钮移动

Question

我在我的导航栏中使用了flexbox，我遇到的一个问题是，当我将鼠标悬停在其中一个按钮上时，由于我的Some text 元素，其余部分移动了一点。

我尝试设置::after标记的宽度，因此悬停时宽度的变化只会影响该宽度，但它并没有像我希望的那样响应。

我可以就如何解决这个问题得到一些建议吗？

＆＃13;

＆＃13;

<a>

＆＃13;

nav {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 90px;
  padding: 0 75px;
  ul {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 715px;
    a {
      padding: 5px;
      &:hover::after {
        content: ".";
      }
    }
  }
}

＆＃13;

＆＃13;

＆＃13;

Answer 1

对于单个点，position: absolute可以在不打扰布局的情况下正常运行：

a {
    padding: 5px;

    &:hover::after {
        content: ".";
        position: absolute;
    }

下面的代码段使用纯CSS进行测试：

nav {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 90px;
  padding: 0 75px;
}

nav ul {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 715px;
}

nav ul a {
  padding: 7px;
}

nav ul a:hover::after {
  content: ".";
  position: absolute;
}

<nav>
  <a href="#home">
    <h1>Brillian.</h1>
  </a>
  <ul>
    <li>
      <a href="#home">Home</a>
    </li>
    <li>
      <a href="javascript:void">Portfolio</a>
    </li>
    <li>
      <a href="blog.html">Blog</a>
    </li>
    <li>
      <a href="#about">About</a>
    </li>
    <li>
      <a href="contact.html">Contact</a>
    </li>
    <li>
      <a href=""><i class="fa fa-search" aria-hidden="true"></i></a>
    </li>
  </ul>
</nav>

Answer 2

你可以试试这个。这是解决这个问题的一种方法。
编辑：我正在努力工作！

nav {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 90px;
    padding: 0 75px;
    background-color: lightgray;
}
nav ul {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 800px;
  list-style: none;
}
nav h1:hover::after {
  content: ".";
  position: absolute;
}
nav ul a:hover::after {
  content: ".";
  position: absolute;
}

<nav>
    <a href="#home"><h1>Brillian.</h1></a>
    <ul>
        <li>
            <a href="#home">Home</a>
        </li>
        <li>
            <a href="javascript:void">Portfolio</a>
        </li>
        <li>
            <a href="blog.html">Blog</a>
        </li>
        <li>
            <a href="#about">About</a>
        </li>
        <li>
            <a href="contact.html">Contact</a>
        </li>
    </ul>
</nav>