如何使用CSS实现导航菜单hover时的底部下划线效果

你现在的实现存在两个核心问题：

1. hover时才添加下边框会额外占用布局空间，导致下划线位置没法和菜单底部的黑色边框重叠，还可能出现按钮跳动的问题
2. 没有给按钮预留边框位置，没法让下划线刚好覆盖在菜单底部的公共边框上

整栏宽度下划线方案（和菜单项同宽，覆盖底部公共边框） #

和你目标效果图效果一致，修改后的可直接运行代码如下：

CSS代码

* {
  box-sizing: border-box; /* 统一盒模型，避免边框撑大元素 */
}
.button {
  background-color: white;
  border: none;
  /* 默认加透明下边框，hover仅改颜色不会出现布局跳动 */
  border-bottom: 4px solid transparent;
  color: black;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  margin: 0;
  /* 添加上下内边距撑高按钮，让底部边框刚好和父容器的底部边框重叠 */
  padding: 10px 0;
}

.button:hover {
  border-bottom-color: #55415f;
  color: #55415f;
}

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

HTML代码（和你原有代码一致，无需修改）

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

文字宽度下划线方案（可选） #

如果你需要下划线和文字宽度一致而非整栏宽度，可以用伪元素方案实现：

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

.button:hover {
  color: #55415f;
}
/* 伪元素实现文字宽度下划线 */
.button:hover::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -3px; /* 数值和父容器底部边框宽度一致，刚好覆盖在黑边框上 */
  width: 100%;
  height: 4px;
  background-color: #55415f;
}

内容的提问来源于stack exchange，提问作者Mateusz Łukowski