установка фонового изображения в ссылке для отображения справа от текстовой ссылки

Question

Я использую toggleClass и slideToggle для выполнения следующих действий:

когда пользователь выбирает ссылку, он скользит вниз по элементу div, затем устанавливает ссылку как открытую, отображая соответствующее фоновое изображение, этоэто просто, (+) и (-), чтобы открыть и закрыть div.

У меня возникли проблемы с отображением фонового изображения справа от ссылки, что дает около 5-10px поля слева, чтобы дать ему некоторый интервал.

Вот снимок экрана того, что он делает: Закрыто (отображается знак (+)): http://cl.ly/4634afa1e7aa4fe10072

Открыто (отображается(-) знак: http://cl.ly/8bc59ab07da46a173d62

HTML для ссылки: <a href="#" class="our-future-intro-slide">Mapping Our Future: Strategic Plan 2010-2015</a>

CSS для того момента, когда ссылка отображается нетронутой и после ее выбора:

// 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%;
}

Вот jQuery, я думаю, что я добавлю это, это работает, только CSS для отображения фонового изображения справа от текста.

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

Answer 1

Попробуйте это:

.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 */
}

И, конечно же, те же модификации для другого правила.

Answer 2

Я не знаю, полностью ли я понимаю, но вы пытались использовать :after?Что-то вроде

.link:after{background:#FFF;}

Answer 3

Думаю, вам будет интересен этот пост - Чистые CSS-всплывающие окна .

ОБНОВЛЕНИЕ: это еще один способ выравнивания изображений при наведении ссылок.