DEMO

Question

我有一个内部跨度的链接，我想在跨度上放置一个边距，因此它与链接标题保持距离，但是，当我使用：hover作为下划线时，会创建一个没有空格的空白区域强调。我希望下划线是链接元素的全宽。我该怎么做呢？谢谢。

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

虽然它可能不是您正在寻找的，但为什么不试试边框呢？

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 正如@DavidThomas解释的那样，如果在下面有一个边框移动元素是一个问题，那么可以很容易地使用框阴影替换边框底部。插图here

Answer 2

删除跨度的边距。保证金空间在悬停时没有下划线。

空间使用 。如下面的标记：

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

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

2 个答案:

DEMO