如何在对 child 应用一些定位时防止 <a> "text-decoration: underline" 损坏？

Question

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

我想知道，是否有办法使 <a> 下划线运行也位于  下方，并且最好只使用 HTML/CSS。

我是怎么遇到这个问题的：

我正在建立一个双语网站，有时英语单词仍然是第二语言内容。在这些情况下，我用  包装这些词并以这种方式应用相应的 font-family：

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

但是，我用于辅助语言标题的 font-family 和 'Ropa Sans' 并排在一起看起来不太好，它们看起来好像 "not sitting" 在同一行。为了解决这个问题，我一直在 -s 上使用相对定位。例如：

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

在我意识到它在应用于链接时弄乱了下划线之前，这个解决方案工作得很好。我可以避免在此类链接上使用 text-decorations，但我更想知道是否有一些我无法识别的简单 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;
}

这有效。

如何在对 child <span> 应用一些定位时防止 <a> "text-decoration: underline" 损坏？

How to keep <a> "text-decoration: underline" from breaking while applying some positioning to the child <span>?

html

css

underline

text-decorations