如何在我的菜单中添加下划线效果？答案

【问题标题】：How i can do an underline effect in my menu?如何在我的菜单中添加下划线效果？
【发布时间】：2021-11-22 05:17:40
【问题描述】：

我正在练习我的 CSS，所以在几个教程之后我开始创建一个简单的网站。我想创建这样的东西：

我怎样才能达到这种效果？我在互联网上寻找答案，我只找到了带有精美动画和下划线效果的解决方案，但我找不到与我的问题类似的解决方案。我只取得了这样的成绩：

这是我的代码

.button {
  background-color: white;
  border: none;
  color: black;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  margin: 0;
}

.button:hover {
  background-color: white;
  border-bottom: #55415f 4px solid;
  color: #55415f;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  margin: 0;
}

.r_menu {
  display: flex;
  justify-content: flex-end;
  border-bottom: black 3px solid;
  gap: 20px;
  margin: 0;
}

<div class="r_menu">
  <button class="button">Home page</button>
  <button class="button">Style demo</button>
  <button class="button">Full width</button>
  <button class="button">Portfolio</button>
  <button class="button">Gallery</button>
  <button class="button">Dropdown</button>
</div>

【问题讨论】：

欢迎来到 SO。提供您迄今为止尝试过的代码，仅提供图像无济于事。因为到目前为止我们无法从图像中提取代码； ) .
这个问题是由于元素的默认margin（用于菜单的标签）。因此，要消除此问题，请在包含 border-bottom: 3px solid black 的元素上使用 margin: 0（即您的菜单）

标签： css menu hover styling underline

【解决方案1】：

悬停时存在间隙和“移动”，因为边框从无变为 4px。

解决此问题的一种简单方法是始终提供边框，只是在没有悬停时使其透明。这样悬停时就没有什么可以移动了，空间已经存在了。

注意：这个 sn-p 还使长边框不那么宽，只是为了使它更像问题中的第一张图片。

.button {
  background-color: white;
  border: none;
  border-bottom: transparent 4px solid;
  color: black;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  margin: 0;
}

.button:hover {
  background-color: white;
  border-bottom: #55415f 4px solid;
  color: #55415f;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  margin: 0;
}

.r_menu {
  display: flex;
  justify-content: flex-end;
  border-bottom: black 1px solid;
  gap: 20px;
  margin: 0;
}

<div class="r_menu">
  <button class="button">Home page</button>
  <button class="button">Style demo</button>
  <button class="button">Full width</button>
  <button class="button">Portfolio</button>
  <button class="button">Gallery</button>
  <button class="button">Dropdown</button>
</div>

【讨论】：