html - 如何在对子 <span> 应用一些定位时防止 <a> "text-decoration: underline"中断？

Question

由于下面解释的原因，我在 <span> 上使用相对定位里面<a>为了稍微改变用 <span> 包裹的文本的位置(将其放置在比自动放置高 2px 的位置)。当我这样做时，很明显，text-decoration: underline;坏了，低于我的<span>它也开始高出 2px。请看 fiddle :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;
}

这有效。