html - Flex 框在悬停时移动

Question

每当我将鼠标悬停在文本上时，我都希望它有一个底部边框。但是，我也让我的文字向上移动。也许有什么建议？图片 before位置和图像不正确 after被抬起了一点。我知道你不能从截图中看到它。但是，我不知道如何上传视频。

.pages {
  width: 370px;
  font-family: 'Heebo', sans-serif;
  font-size: 18.5px;
  display: inline-flex;
  flex-direction: row;
  margin: auto 0px auto 0px;
  justify-content: space-between;
  padding: 0px 24px 22px 0px;
}

.pages :hover {
  cursor: pointer;
  border-bottom: 1px solid black;
  padding-bottom: 1px;
}

<div class="pages">
  <a id="Gallery">Gallery Walls</a>
  <a id="Contact">Contact</a>
  <i class="fab fa-instagram" id="icon"></i>
  <i class="fas fa-store" id="icon"></i>
</div>

Answer 1

元素移动是因为您在悬停时添加了填充和边框，从而改变了元素的大小。与其在悬停时添加边框，不如给元素一个边框(和填充)作为开始，然后将边框的颜色从透明更改为您选择的颜色。
例如:

.pages > * {
    border-bottom: 1px solid transparent;
    padding-bottom: 1px;
}

.pages > :hover {
    border-bottom-color: black;
}

请注意，子组合器( > )对于您当前的 HTML 结构不是必需的，但在您在任何 a 中添加子元素时很有用或 i元素。或者，您可以给 pages 的每个 child 一样class (例如 page-link )并在此处使用它。