How do I place an image after a link?

I need to have a link in my webpage followed by a question mark image, so that a mouse over on the question mark image, shows a tool tip. This is the code I have:

 <p>
  <a class="mainLinks" href="#">Currency Converter</a><a href="#" class="questionIcon">&nbsp;</a>
 </p>

and the corresponding css is:

 .costSummaryBox .questionIcon{
       background:url(../images/static/question2.png) n开发者_StackOverflow中文版o-repeat;
       text-decoration:none;
}

But in my webpage, I get the image below the link. How do I make them appear in the same line?

---

Try the following code:

<p>
   <a class="mainLinks" href="#">Currency Converter&nbsp;<img src="../images/static/question2.png" /></a>
</p>

---

You need to use AFTER. This link might help:
http://www.w3schools.com/css/sel_after.asp

---

You can do this

<p>
    <a class="mainLinks" href="#">Currency Converter</a>
</p>

.mainLinks{
    padding-right:30px;
    background:#fff url(...) no-repeat right top;
    text-decoration:none;
}

Check working example at http://jsfiddle.net/eMLkS/