Link arrows dropping to new line

Question

I have a sidebar with a list of links and each link has an arrow icon to the right of it (set in the anchor styles using the :after selector). On many of the links, the arrow is dropping down to its own line. I want to make sure the text can break to a new line as needed, but prevent the arrow from being orphaned onto a line by itself.

I thought I had solved the problem by using "white-space: nowrap" on the :after pseudo element because that worked in Firefox. Unfortunately, I discovered it isn't working in IE8, Chrome & Safari.

Is there a way to prevent the link icon from breaking to its own line, while still allowing the text in the link to wrap as needed, in Firefox, IE8, Chrome and Safari?

Basic HTML structure:

<div id="sidebar">
  <ul>
    <li><a>Link 1</a></li>
    <li><a>Link 12</a></li>
  </ul>
</div>

The style rules (written in sass):

div#sidebar
  width: 170px

  a:after
    content: url('images/icon_double-arrow.png')
    margin: 0 0 0 6px
    white-space: nowrap

Answer 1

I believe I resolved the issue. I changed the styles so that the arrow image is set as the anchor background and positioned it to the right using padding instead of setting the arrow image as :after content. Works in all mentioned browsers: a border: 0 background: url('images/icon_arrow.png') no-repeat right center padding-right: 15px

Answer 2

The simplest solution is probably to use a character rather than an image in generated content, e.g.

content: '\bb';

to use “»” U+00BB RIGHT-POINTING DOUBLE ANGLE QUOTATION MARK, which resembles the image you are now using, or

content: '\2192';

to use the arrow character “→” U+2192 RIGHTWARDS ARROW.

The reason why IE behaves oddly seems to be that it generally treats an image as allowing a line break before it, when appearing in inline context, even when no space intervenes (e.g. sometext<img ...>). When you instead use a character, with no space character before it, IE applies the line breaking rules of text (which are very odd in IE but do not allow a line break e.g. before the “»” in “foo»”).