Использование изображения из спрайта в элементе списка после того, как его содержание

Question

У меня есть следующий HTML для ул:

<div id="articlesideitems"> 
    <ul> 
     <li><a href="#"><span style="">List item content 1</span><span>&nbsp;</span></a></li> 
     <li><a href="#"><span>List item content 2</span><span>&nbsp;</span></a></li> 
     <li><a href="#"><span>List item long long long long long long content</span><span>&nbsp;</span></a></li> 
     <li><a href="#"><span>List item long long long long long long content</span><span>&nbsp;</span></a></li>                           
    </ul> 
<div id="articlesideitems"> 

и CSS:

div#articlesideitems ul li span { 
    display: inline-block; 
} 

div#articlesideitems ul li span:last-child { 
    background: url('images/sprite.png') no-repeat -87px -13px; 
    width: 9px; 
    height: 16px; 
    margin-left: 10px; 
} 

и выход аналогичен:

Как вы видите, если текст имеет более одной строки, двойная стрелка не находится в конце текста, bu t на новой строке. Как решить эту проблему?

Answer 1

Нанести display: inline-block только span:last-child

div#articlesideitems ul li span:last-child { 
    display: inline-block; 
} 

Пример: http://codepen.io/anon/pen/KpKoNg

---

Результат

Answer 2

Вот вариант для вас, что уменьшает количество разметки Requir путем удаления всего <span> с, а также устраняет необходимость в внешнем изображении с использованием псевдоэлемента ::after для вставки метки кавычек с двойным углом (\bb), предшествующей неразрывному пространству (\a0). Он не будет выглядеть точно так же, как в вашем спрайте, поэтому вам нужно будет решить, приемлемо ли это жертвоприношение.

More information on pseudo elements

Изменение размера окна браузера, чтобы увидеть, как линии сломаться.

body{margin:0;} 
 
#articlesideitems ul{ 
 
    list-style:none; 
 
    margin:0 auto; 
 
    padding:0; 
 
    width:50%; 
 
} 
 
#articlesideitems li{ 
 
    border-bottom:1px solid #009; 
 
} 
 
#articlesideitems a{ 
 
    color:#009; 
 
    display:block; 
 
    font-family:verdana; 
 
    padding:5px; 
 
    text-decoration:none; 
 
} 
 
#articlesideitems a::after{ 
 
    content:"\a0\bb"; 
 
}

<div id="articlesideitems"> 
 
    <ul> 
 
     <li><a href="#">List item content 1</a></li> 
 
     <li><a href="#">List item content 2</a></li> 
 
     <li><a href="#">List item long long long long long long content</a></li> 
 
     <li><a href="#">List item long long long long long long content</a></li> 
 
    </ul> 
 
</div>