prevent :after element from wrapping to next line

Question

I have this HTML: ```

I want the icon to stay on the same line as this last word

``` I'm appending an icon using the :after pseudo element: ``` ul li.completed a:after { background:transparent url(img.png) no-repeat; content: ''; display:inline-block; width: 24px; height: 16px; } ``` The problem: if the available width is too small, the icon wraps to the next line. I would want it to stay on the same line as the last word of the link it's appended to: Is this doable, without adding 'nowrap' to the entire link (I want the words to wrap, just not the icon). See jsFiddle here.

Accepted Answer

you can add the image to the last word instead. that will make it break together. add a class to word `word` and `.test:after { ...` http://jsfiddle.net/52dkR/ the trick is also to make that class to be `inline-block` and if you want to keep the underline see this. http://jsfiddle.net/atcJJ/ add `text-decoration:inherit;`

prevent :after element from wrapping to next line

Solution

Problem