Question

Is it possible add an icon after a link that breaks with the last word?

:after and content both break in Chrome.

Test: http://jsfiddle.net/V32Wd/1/

Answer 1

For the markup <a class="after" href="#">The icon should not break alone</a>, use the following CSS code:

a.after:after {
    content: '\feff' url('...');
    padding-left: 4px;
    white-space: nowrap;
}

The addition of '\feff' means adding U+FEFF ZERO WIDTH NO-BREAK SPACE, an invisible control character that prevents line breaks before and after. This helps on Chrome and IE, but not on Firefox. Adding white-space: nowrap deals with the issue on Firefox; this is illogical since by definition it only prevents line breaks inside the pseudo-element, and the issue is a line break between the normal content and the pseudo-element—anyway, since it helps, let’s use it here.

A more common approach is to add an icon as a background image for the a element, placed at the right. This avoids the line breaking issue.