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.

Flotation

For those wondering why white-space: nowrap; doesn't work, it's because it only prevents the ::before itself from wrapping. It does does not prevent a wrap between the ::before and the subsequent element. – Heilungkiang

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.

Jacobinism

For the record, the reason this works is because if you remove the inline-block specification, it defaults to inline. Once considered inline it follows the current word-break rules as if your psuedo-element was just another letter in the sentence. – Judas

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.

Inmost

Any particular reason why this is better? you should detail your answer a bit more I think. – Circumpolar

The OP specified they are not looking for a nowrap solution. – Monochord

Uh, sorry, I am new to this community and didn't saw notification before. nowrap inside :before CSS rule worked in my case. May be it was only in my main browser. a.tooltipWord:before { content: url('..../quest_min.gif'); white-space: nowrap; } Oh, I was not clear enough, I see it now. The point was to change inline-block rule to nowrap one, not to add them up. – Inmost

Thank you, @m-patel :) I updated my comment with explanations. – Inmost

This prevents the ::before from wrapping, but does not prevent a wrap between the ::before and the element. – Heilungkiang

Answer 3

The best solution to avoid wrapping between the anchor and :before would be:

a.some-link {
    display: inline-block;
}
a.some-link::before {
    content: 'x';
}

Bonus! To avoid text-decoration underlining for :before on hover:

a.some-link::before {
    display: inline-block;
}

Slapstick