我有一个带有链接列表的侧边栏，每个链接的右侧都有一个箭头图标（使用：after选择器在锚点样式中设置）。在许多链接上，箭头正在下降到它自己的行。我想确保文本可以根据需要突破到一个新行，但是防止箭头单独孤立到一行。
我认为我通过在：after伪元素上使用“white-space：nowrap”解决了这个问题，因为它在Firefox中有效。不幸的是，我发现它在IE8，Chrome＆amp; Safari浏览器。
有没有办法阻止链接图标突破到自己的行，同时仍然允许链接中的文本根据需要包装在Firefox，IE8，Chrome和Safari中？
基本HTML结构：
<div id="sidebar">
<ul>
<li><a>Link 1</a></li>
<li><a>Link 12</a></li>
</ul>
</div>
样式规则（用sass编写）：
div#sidebar
width: 170px
a:after
content: url('images/icon_double-arrow.png')
margin: 0 0 0 6px
white-space: nowrap
答案 0 :(得分：0)
我相信我已经解决了这个问题。我更改了样式，以便将箭头图像设置为锚点背景，并使用填充将其定位到右侧，而不是将箭头图像设置为：after content。适用于所有提到的浏览器：边框：0背景：网址（'images / icon_arrow.png'）无重复右中心填充 - 右：15px
答案 1 :(得分：-1)
最简单的解决方案可能是在生成的内容中使用字符而不是图像，例如
content: '\bb';
使用“»”U + 00BB RIGHT-POINTING双角度报价标记，类似于您现在使用的图像，或
content: '\2192';
使用箭头字符“→”U + 2192 RIGHTWARDS ARROW。
IE表现奇怪的原因似乎是它通常将图像视为允许在它之前进行换行，当出现在内联上下文中时，即使没有空格介入（例如sometext<img ...>）。当你使用一个没有空格字符的字符时，IE会应用文本的换行规则（very odd in IE但不允许换行符，例如在“foo”中的“»”之前）。