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:

Separated icon from link

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.

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. — BallpointBen, Aug 03 '23 at 16:38

score 13 · Accepted Answer · edited Jul 02 '15 at 12:46

13

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.

edited Jul 02 '15 at 12:46

Daniel Koster

421
4
6

answered Feb 13 '13 at 10:42

James Donnelly

126,410
34
208
218

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. – Pete Jan 17 '20 at 00:42

ornic · Answer 2 · 2014-08-29T19:45:32.683

7

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.

edited Aug 29 '14 at 19:45

answered Jul 16 '14 at 15:25

ornic

332
3
9

3

Any particular reason why this is better? you should detail your answer a bit more I think. – Mo Patel Jul 16 '14 at 15:32
The OP specified they are not looking for a `nowrap` solution. – indivisible Jul 16 '14 at 17:07
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. – ornic Aug 29 '14 at 08:44
Thank you, @m-patel :) I updated my comment with explanations. – ornic Aug 29 '14 at 09:04
This prevents the `::before` from wrapping, but does not prevent a wrap between the `::before` and the element. – BallpointBen Aug 03 '23 at 16:36

Dmitry Shashurov · Answer 3 · 2021-03-05T10:25:45.773

0

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;
}

edited Mar 05 '21 at 10:25

answered Mar 02 '21 at 13:14

Dmitry Shashurov

1,148
13
11

How to avoid line breaks after ":before" in CSS

3 Answers3

Linked