html - スプライトの外部リンクアイコンを右側に表示する方法

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