How to avoid line breaks after “:before” in CSS

Question

On my website I'm using font icons for certain link types. These icons are added via :before CSS syntax.

a.some-link:before {
  font-family: icons;
  display: inline-block;
  padding-right: 0.3em;
  content: 'x';
}

However, when this link is at the beginning of a line, it's sometimes separated from its icon:

I tried adding white-space: nowrap to the CSS rule above but that didn't help.

How do I keep the icon and the text together? (CSS 3 is okay)

Note: I don't want to format the whole link with white-space: nowrap.

Answer 1

Simply removing the display:inline-block; seems to fix this issue:

a.some-link:before {
    font-family: icons;
    padding-right: 0.3em;
    content: 'x';
}

JSFiddle.

Unfortunately, you need "display: inline-block" to show SVG. Simple solution is to put "display: inline-block" on the "a". This will cause your SVG to render properly AND it will keep your a:before and the a together on one line.

Answer 2

It is much better to add nowrap rule to :before css:

white-space: nowrap;

UPD: http://jsfiddle.net/MMbKK/5/

The reason for nowrap rule is to work properly with image content in :before. Text content don't need this rule to stay near the main element.