Flex 框在悬停时移动

Question

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

.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相同的孩子class（例如page-link）并在此处使用它。