导航栏悬停下划线与按钮间距问题求助

1. 导航链接悬停下划线不生效问题 #

原因 #

你给链接的:after伪元素用了position: absolute，但作为父元素的<a>标签默认是inline元素，没有设置position: relative，导致伪元素的定位参照不是链接本身，而是更上层的容器，所以下划线无法正确显示在链接下方。

修复代码 #

修改CSS中<a>标签的样式，加上position: relative，确保伪元素以链接为定位参照：

a {
    font-family: 'Gabarito', cursive;
    font-weight: 500;
    font-size: 13px;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    position: relative; /* 添加这行，让伪元素以a标签为参照 */
}

.nav-links li a:hover::after,
.nav-links li a.active::after {
    content: "";
    width: 100%;
    height: 4px;
    background: #9908ff;
    position: absolute;
    bottom: -4px;
    left: 0px;
}

2. 导航栏布局间距问题 #

原因 #

• 右侧.nav-btns内的两个按钮没有设置间距，导致挤在一起；
• .nav-container没有左右内边距，整体布局紧贴页面边缘，视觉不平衡；
• HTML中.nav-btns里的第一个<a>标签后面多了一个多余的</li>，破坏DOM结构。

修复代码 #

第一步：修正HTML错误

删除.nav-btns中多余的</li>：

<div class="nav-btns">
    <a href="#"><i class="fa-solid fa-magnifying-glass"></i></a>
    <a href="#"><i class="fa-sharp fa-solid fa-bars"></i></a>
</div>

第二步：调整CSS间距

给容器添加左右内边距，给右侧按钮设置间距：

.nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 30px; /* 左右添加内边距，避免紧贴页面边缘 */
}

.nav-btns a {
    margin-left: 25px; /* 给右侧按钮添加左侧间距 */
    font-size: 18px; /* 可选：放大图标尺寸，提升视觉效果 */
}

你也可以根据需求调整.nav-links li的margin值，让中间链接区域的间距和左右区域更匹配。

内容的提问来源于stack exchange，提问作者Tammy