悬停时带下划线的菜单项jumpig

问题描述

我试图在悬停菜单项上加下划线。我的代码如下：

a:hover {
    color: black;
    border-bottom: 3px solid black;
    padding-bottom: 5px;
}

当我使用此代码时，菜单会在悬停时跳转。

我的页面：

https://www.webpreludi.online/

如何仅使下划线效果跳出菜单？

解决方法

您需要从边框开始并在原始锚点上填充，否则您将始终具有这种效果。从透明的边框开始：

a {
  display: inline-block;
  padding-bottom: 5px;
  border-bottom: 3px solid transparent;
  text-decoration: none;
}

a:hover {
  color: black;
  border-bottom-color: black;
}

<a href="#">test</a>

,

在CSS中使用text-decoration: underline;，然后从代码中删除border-bottom和padding-bottom。