如何避免CSS中“：before”之后的换行符

Question

在我的网站上，我使用某些链接类型的字体图标。这些图标是通过:before CSS语法添加的。

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

但是，当此链接位于一行的开头时，它有时会与其图标分开：

我尝试将white-space: nowrap添加到上面的CSS规则中，但这没有帮助。

如何将图标和文字放在一起？（CSS 3没问题）

注意：我不想使用white-space: nowrap格式化整个链接。

Answer 1

只需删除display:inline-block;似乎可以解决此问题：

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

JSFiddle

不幸的是，您需要“display：inline-block”来显示SVG。简单的解决方案是在“a”上放置“display：inline-block”。这将使您的SVG正确呈现并且它将保持a：before和a在一行上。

Answer 2

最好将nowrap规则添加到:before css：

white-space: nowrap;

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

nowrap规则的原因是与:before中的图片内容一起正常使用。文本内容不需要此规则来保持在主要元素附近。

Answer 3

避免在锚点和 :before 之间换行的最佳解决方案是：

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

奖金！ 为了避免在悬停之前为 :before 加下划线：

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