如何在对子 <span> 应用一些定位时保持 <a> “text-decoration: underline”不中断？

Question

出于下面解释的原因，我在<a> 内部使用<span> 的相对定位，以便稍微改变用<span> 包裹的文本的位置（使其比自动放置的位置高2px）。当我这样做时，很明显，text-decoration: underline; 坏了，低于我的<span> 它也开始高出 2px。请看小提琴：http://jsfiddle.net/8qL934xv/

我想知道，是否有办法让<a> 下划线也位于<span> 下方，且不会中断，最好仅使用 HTML/CSS。

我是如何遇到这个问题的：

我正在建立一个双语网站，有时英语单词仍然在第二语言内容中。在这些情况下，我用<span lang="en"> 包装这些单词并以这种方式应用相应的字体系列：

* [lang="en"]
{
    font-family: 'Ropa Sans', helvetica;
}

但是，我用于次要语言标题的字体系列和“Ropa Sans”彼此相邻看起来不太好，它们看起来好像“没有坐在同一行”。为了解决这个问题，我一直在我的<span>-s 上使用相对定位。例如：

h1 span {
   position: relative;
   top: -2px;
}

这个解决方案工作得很好，在我意识到它在应用于链接时会与下划线混淆之前。我可以避免在此类链接上使用文本装饰，但我想知道是否有一些我无法识别的简单 CSS 解决方案。

Answer 1

这是不可能的，但你可以做类似的事情

a {
    display: block;
    border-bottom: 1px solid transparent;
    text-decoration: none;
}

a:hover {
    text-decoration: none;
    border-bottom: 1px solid blue;
    display: inline-block;
}

这行得通。