CSS/HTML: тег с интервалом внутри, полем интервала, создающим пробел на подчеркивании

Question

У меня есть ссылка с интервалом внутри, я хочу разместить поле на интервале, чтобы он был удален от заголовка ссылки, однако, когда я использую:hover для подчеркивания, создается пробел, где нет подчеркивания. Я хочу, чтобы подчеркивание было полной шириной элемента ссылки. Как мне это сделать? Спасибо.

http://jsfiddle.net/EY387/

HTML

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

CSS

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

Answer 1

Удалите поля, чтобы охватить. пространство на полях не подчеркивается при наведении.

Для использования в космосе  , Как в этой следующей разметке:

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

Css:

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

DEMO

Answer 2

Хотя это может быть не совсем то, что вы ищете, почему бы не попробовать границу?

HTML

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

CSS

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

Демонстрация Как объяснил @DavidThomas, если наличие элементов перемещения границы под ним является проблемой, использование тени-рамки может быть легко заменено на нижнюю границу. Иллюстрированный здесь