css – prevent：after元素包装到下一行

我有这个HTML： <ul> <li class="completed"><a href="#">I want the icon to stay on the same line as

...我有这个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>

我使用：after伪元素附加一个图标：

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

问题：如果可用宽度太小，图标会换行到下一行。我希望它保持在与它附加到的链接的最后一个字的同一行：

这是可行的，没有添加“nowrap”到整个链接(我想要的词，只是不是图标)。

参见jsFiddle here。

.

解决方法

. 您可以将图像添加到最后一个词。这将使它打破在一起。

添加一个类到word
< strong class =“test”> word< / strong>

和.test：after {…

http://jsfiddle.net/52dkR/

诀窍是让这个类是inline-block

如果你想保持下划线看到这一点。

http://jsfiddle.net/atcJJ/

add text-decoration：inherit;

. ..