CSS/HTML：一个内有span的标记，span边距在悬停下划线上创建空白

我有一个内有跨距的链接，我想在跨距上放置一个边距，使其与链接标题保持距离，但是，当我使用：hover作为下划线时，会在没有下划线的地方创建一个空白。我希望下划线是链接元素的全宽。我该怎么做？多谢各位

HTML

---

删除要跨越的边距。悬停时边距空间不带下划线

用于空间使用

。如以下标记所示：

<div>
    <a href="#" class="link-1">
        <span class="span-1">1&nbsp;</span>
        Hello
    </a>    
</div>

---

虽然这可能不是你想要的，为什么不试试边界呢

HTML

正如@DavidThomas所解释的，如果在下面移动边框元素是一个问题，那么使用框阴影可以很容易地替换为边框底部。

---

插图

您可以更改HTML吗？是否可以将文本“Hello”包装在一个span中？是否希望下划线占据元素的整个宽度，还是希望它停在“title”文本处，或者完全是别的？我以前试过使用一个span，但它没有改变任何东西，我希望下划线覆盖链接元素的整个宽度。加上span实际上填充了一个基于文本并使用css（即符号集）访问的图标。抱歉，让我来修正答案。编辑入站；这似乎是实现这一点的唯一方法（即使在视觉上并不完全相同）。我建议您将透明边框底部添加到非悬停状态，否则当链接悬停/未悬停时，链接下方的内容将跳转（视觉上不舒服）。@DavidThomas，使用插入框阴影也可以轻松实现相同的结果。我唯一的犹豫是与某些浏览器的兼容性问题。你知道，他不应该被点名吗？cough IE cough我刚刚再次编辑了答案，并包含了一个使用方框阴影而不是边框底部的演示。谢谢，这确实有效。但是使用并不能让我精确地控制大小，它迫使我依赖于使用的字体和字号。我必须进行实验，看看结果。

.link-1 {
    font-size: 16px;
    text-decoration: none;
}
.link-1:hover {
    text-decoration: underline;
}
.span-1 {
    font-size: 12px;
    margin-right: 5px;
}

<div>
    <a href="#" class="link-1">
        <span class="span-1">1&nbsp;</span>
        Hello
    </a>    
</div>

.link-1 {
    font-size: 16px;
    text-decoration: none;
}
.link-1:hover {
    text-decoration: underline;
}
.span-1 {
    font-size: 12px;
}

<div>
    <a href="#" class="link-1">
        <span class="span-1">1</span>
        Hello
    </a>    
</div>

.link-1 {
    font-size: 16px;
    text-decoration: none;
}
.link-1:hover {
    border-bottom:1px solid #000;
}
 .span-1 {
    font-size: 12px;
    margin-right: 5px;
}