Предотвратить перенос элемента :after на следующую строку ⇐ CSS

[Anonymous]

У меня есть этот HTML:

Код: Выделить всё

[list]
[*]I want the icon to stay on the same line as this last [b]word[/b]
[/list]

Я добавляю значок, используя псевдоэлемент :after:

Код: Выделить всё

ul li.completed a:after {
background:transparent url(img.png) no-repeat;
content: '';
display:inline-block;
width: 24px;
height: 16px;
}

Проблема: если доступная ширина слишком мала, значок переносится на следующую строку. Я бы хотел, чтобы оно оставалось на той же строке, что и последнее слово ссылки, к которой оно добавлено:




Можно ли это сделать, не добавляя «nowrap» ко всей ссылке (я хочу, чтобы слова переносились , а не значок).

См. jsFiddle здесь.

Подробнее здесь: https://stackoverflow.com/questions/161 ... -next-line