Css 将精灵图像放置在锚定标记的右侧？

我有css精灵图像。它工作正常，但问题是我想要锚定标记文本的右侧图像。但它显示在左侧。精灵图像在这里

预期结果：

[Mylinktext]<MyImagehere>

和HTML

<div>
    <p>Magenta</p>
    <a href="#" class="ctrls magenta">Et Movet</a>
</div>

洋红

---

如何将图像放置在文本的右侧？

当我尝试您的代码时，结果似乎与您想要的一样：[Mylinktext]。我可能错过了什么。试着解释一下，我会尽力帮你的

就我个人而言，我不会用雪碧。相反，我会为每种颜色制作一张图像（我发现这更容易操作），或者，更好的是，用我想要的字符制作一种字体（参考：我没有尝试过任何程序，所以我不知道它们有多好） 然后使用@font-face规则（参考：）。

在

锚定标记的文本右侧添加
怎么样

HTML

<div>
    <p>Magenta</p> <a href="#" class="ctrls magenta">Et Movet <span class="icon"></span></a>
</div>

IE7是新的IE6。最好是它被掩埋和遗忘。对你不起作用吗？@FloydPink通过使用背景位置，我从精灵中撕下了特定的图像。现在我想将图像正好放在锚定标记文本的右侧。我希望如果你看到代码你能理解…@MarcB你是对的..但是怎么做..我的人也要求签入IE 7:'（我需要把它交给开发人员。所以我不能每次都解释它们来添加跨度。还有其他解决方案吗…？（没有Javascript）如果
：after
和一个附加的
span
不起作用，并且您想要定位一个精灵背景，我不知道还有其他选择。祝您一切顺利！
<div>
    <p>Magenta</p>
    <a href="#" class="ctrls magenta">Et Movet</a>
</div>

<div>
    <p>Magenta</p> <a href="#" class="ctrls magenta">Et Movet <span class="icon"></span></a>
</div>

.ctrls {
    font-family:Arial;
    font-weight:bold;
    font-size:16px;
    color:black;
    text-decoration:none;
}
.ctrls:hover {
    text-decoration:underline;
}
.ctrls .icon {
    display: inline-block;
    background-image: url(http://jstiles.com/temp/1360875952/ctrls/css-sprite.png);
    background-repeat:no-repeat;
    width: 16px;
    height: 16px;
    background-position:0px -144px;
}
.ctrls:hover .icon {
    background-position: 0px -252px;
}