prevent :after element from wrapping to next line

Solution 1:

JSFiddle - http://jsfiddle.net/Bk38F/65/

Add a negative margin to the pseudo element, to compensate its width:

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

Now, that is going to make the icon overflow the container, and the line is going to break only when the text meet the end of the line. If you need to maintain the icon inside the original container width, you can add padding to compensate again:

ul li.completed a {
    display: inline-block;
    padding-right: 24px;
}

IMPORTANT UPDATE:

For this method to work, there must be no white space between the text and the closing tag of the element holding the pseudo element. Even though the pseudo element's width is compensated by a negative margin, the white space will make the line break when it meets the edge of the parent element. For example, this works:

<span>text goes here</span>

and this doesn't:

<span>
    text goes here
</span>

Solution 2:

you can add the image to the last word instead. that will make it break together.

add a class to word <strong class="test">word</strong>

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;