CSS / HTML：内部具有跨度，跨度边距的标记，在悬停划线下创建空白

Question

I have a link with a span inside, I want to place a margin on the span so it is distanced from the link title, however, when I use the :hover for underline, a white space is created where there is no underline. I want the underline to be the full width of the link element. How do I do this? Thank you.

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

Though it may not be exactly what you're looking for, why not try a border?

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

Demo As @DavidThomas explained, if having a border move elements underneath is a problem, the use of a box-shadow could be easily swapped for the border-bottom. Illustrated here

Answer 2

Remove margin to span. margin space not taking underline on hover.

For space use   . As in this following markup:

<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