如何移除链接悬停变换时的多余空白？

你的问题根源在于HTML里<a>标签内部的文字带有换行和缩进，这些空白字符会被浏览器解析为额外空格，导致<a>元素的实际宽度比文字本身更宽。而你设置的伪元素::before使用width: 100%，是基于<a>的整体宽度计算，所以悬停时下划线会覆盖这些多余空白。

下面提供两种解决方法：

方案1：清理HTML中的空白 #

把<a>标签的内容和标签写在同一行，消除内部的换行与缩进：

<nav>
    <span class="navigation">
        <span class="navigation_links">
            <a class="menu" href="menu.html">Menu</a>
            <a class="location" href="location.html">Location</a>
            <a class="order" href="order.html">Order</a>
        </span>
        <!--Place Image Here-->
    </span>
</nav>

方案2：用CSS限制元素宽度 #

如果不想修改HTML结构，可以给<a>标签添加属性，让它的宽度贴合文字内容：

.navigation_links a {
    text-decoration: none;
    position: relative;
    color: #000000;
    margin: 20px;
    /* 新增属性 */
    display: inline-block;
    width: fit-content;
}

width: fit-content会让元素宽度自适应文字长度，现代浏览器都支持；如果需要兼容更旧的浏览器，可以改用white-space: nowrap配合text-align: left，同样能避免空白影响宽度计算。

修改后，伪元素的下划线就只会覆盖文字本身的宽度，不会再出现多余的延伸部分。

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