html - 如何从右侧的 Sprite 显示外部链接图标

Question

如何在精灵的链接文本的右侧显示外部链接图标？

使用 :after psudo 进行编辑：

a.external:after {
    width:12px;
    height:12px;
    content:url(../img/icons/ico_sprite.png) no-repeat -985px -3px;
}

这会在链接后加载精灵，但不会裁剪为所需的图标。任何更多的额外线索将非常有帮助....

我的 HTML：

<a class="external_ico" href="">myLink</a>

和 CSS：

a.external_ico {
    width:12px;
    height:12px;
    background: url(../img/icons/ico_sprite.png) no-repeat -985px -3px;
}

显示：

[>]我的链接

但我需要的是：

我的链接 [>]

我也试过这个CSS：

a.external_ico {
    width:12px;
    height:12px;
    background: url(../img/icons/ico_sprite.png) center right no-repeat -985px -3px;
}

但显示：

我的链接

如果我没有从精灵中获取图标，我没有问题，但我有很多图标，并且想从精灵中获取这个图标。任何帮助，将不胜感激。谢谢。

score 0 · Accepted Answer

只需在a元素的右侧添加一个填充

a.external_ico {
    padding-right: 12px;
    background: url('http://www.placehold.it/12x12') center right no-repeat;
}

1 回答 1