html - 如何设置边框底部以覆盖文本的宽度而不是整个汉堡菜单？

Question

我有一些 CSS 代码，如果将鼠标悬停在或选中，它会在导航菜单链接下显示边框线。问题是在桌面上它看起来不错，你可以在这里看到：

桌面：

问题出在手机上。如果你看下面的图片，边框线一直穿过菜单。如果它只涵盖文本/图标会很好。有谁知道如何使用css解决这个问题？

移动的：

CSS：

#{$wrap} { 
    clear: both; 
}

a.mega-menu-link:hover {
    border-bottom: 2px solid #1034a6 !important;
}

.mega-current-menu-item > a.mega-menu-link:hover {
    border-bottom: 0 !important;
}

示例 html：

 <a class="mega-menu-link" href="..." tabindex="0"><i class="fa fa-home" aria-hidden="true"></i></a>

标签： htmlcss

Answer 1

似乎a.mega-menu-link元素太宽了。因此，我建议您做的是将所有导航链接（即使只有您想要下划线的导航链接）放在<div>具有所需宽度的较小元素中，然后根据需要设置该边框底部。