setting background image on link to show up to the right of text link

Question

I am using toggleClass and slideToggle to accomplish the following:

when the user selects a link, it will slide down the div, then it will set the link as open, displaying the appropriate background image, this is just a simple, (+) and (-) to open and close the div.

What I am having trouble with, is displaying the background-image to the right of the link, giving it about 5-10px of margin-left, to give it some spacing.

Here is a screen shot of what it is doing: Closed (displaying (+) sign): http://cl.ly/4634afa1e7aa4fe10072

Open (displaying (-) sign): http://cl.ly/8bc59ab07da46a173d62

HTML for link: <a href="#" class="our-future-intro-slide">Mapping Our Future: Strategic Plan 2010-2015</a>

CSS for when it displays the link untouched, and after it is selected:

// link is not open
.our-future-intro-slide {
    background: url('/images/uploads/images/plus_sign.png') no-repeat 120% 0%;
}

// link is open
.our-future-intro-slide-open {
    background: url('/images/uploads/images/plus-icon.png') no-repeat 120% 0%;
}

Here is the jQuery, I figure I'll throw that in, it works, just the css for making the background-image show up to the right of the text.

$(document).ready(function() {
 $('.our-future-intro-slide').click(function() {
  $(this).toggleClass("our-future-intro-slide-open");
  $(".our-future-intro").slideToggle(100);
 });
});

Answer 1

Try this:

.our-future-intro-slide {
    background: url('/images/uploads/images/plus_sign.png') no-repeat top right;
    padding-right: 30px; /* or whatever the width of the background image is */
}

And, of course, the same modifications for the other rule.

Answer 2

I think you will be interested in this post - Pure CSS "Popups".

UPDATE: that's another way to align images on links hover.

Answer 3

idk if I understand totally but have you tried using an " :after " ??? like .link:after{ background: #FFF; } or whatever...