header 和页脚中的边框底部长度

Question

我正在这个网站上工作 blog.scene.app。我想减少 header 和页脚中的边框底部长度。现在它从左侧和右侧伸展。但我希望它就在单词的正下方，并且不应该从左侧或右侧走到外面。我已经为 header:

尝试过此代码

ul#menu-1-30fa770.elementor-nav-menu li a:hover{
    border-bottom: 1px solid white;
}

对于页脚，我这样写：

ul#menu-1-b51f92a.elementor-nav-menu li:hover, ul#menu-1-388657d.elementor-nav-menu li:hover, ul#menu-1-71135f8.elementor-nav-menu li:hover{
    border-bottom: 1px solid white;
}

唯一的问题是在 header 中悬停时的底部边框和页脚从文本的左侧和右侧向外移动，我希望它不应该向外移动并且只停留在文字下方。我对此很陌生，找不到任何解决方案来完成这项任务。非常感谢您的帮助。谢谢。

Answer 1

border-bottom 向左和向右延伸，因为它有 padding。我删除了填充并添加了左右 margin 。这是您应该使用此代码获得的结果：

ul#menu-1-30fa770.elementor-nav-menu li a:hover {
    border-bottom: 1px solid white;
    padding-left: 0;
    padding-right: 0;
    margin: 0 20px;
}

header 和页脚中的边框底部长度

Border Bottom length in header and footer

css

wordpress

menu

header