Как сохранить <a> «text-decoration: underline» от взлома при применении некоторого позиционирования к ребенку <span>?

Question

По причинам, объясняемым ниже, я использую относительное позиционирование на <span> внутри <a>, чтобы слегка изменить положение текста, обернутого <span> (чтобы разместить его на 2 пикселя выше, чем оно установлено автоматически). Когда я это делаю, очевидно, что 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> -х. Например:

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; 
} 

Это работает.