empêche l'élément :after de passer à la ligne suivante

Question

J'ai ce HTML :

<ul>
    <li class="completed"><a href="#">I want the icon to stay on the same line as this last <strong>word</strong></li>
</ul>

J'ajoute une icône à l'aide du pseudo-élément :after :

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

Le problème : si la largeur disponible est trop petite, l'icône s'enroule sur la ligne suivante. Je voudrais qu'elle reste sur la même ligne que le dernier mot du lien auquel elle est jointe :

Est-ce possible, sans ajouter 'nowrap' à l'ensemble du lien (je veux que les mots soient enveloppés, mais pas l'icône).

Voir jsFiddle aquí .

Answer 1

J'ai juste utilisé : white-space: nowrap; Ça a marché pour moi !