使用 ::before 选择器添加空白 [重复]答案

【问题标题】：Add whitepaces with ::before selector [duplicate]使用 ::before 选择器添加空白 [重复]
【发布时间】：2016-10-04 22:46:52
【问题描述】：

我试过了，但是没用：

.stackoverflow::before {
    font-family: 'FontAwesome';
    content: "\f16c ";
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<a class="stack-link stackoverflow" href="http://stackoverflow.com">StackOverflow</a>

我们可以用::before 选择器和content 属性添加空格吗？

【问题讨论】：

可以加边距吗？
这很奇怪......如果我再添加 1 个空格，或者用另一个字符替换图标本身，它就可以工作......
^ 这种看似奇怪的行为在那边得到了解决。转义序列后的第一个空格是定义它结束的分隔符。
@AlexanderO'Mara 感谢您的参考。这就是我真正想了解的:)

标签： css css-selectors

【解决方案1】：

是的，您可以像这样添加空格content: "\f16c \00a0";

Jsfiddle

\00a0 是不间断空格的十六进制代码，用于content 属性。 More Info

希望对你有帮助:)

【讨论】：

你能解释一下这段代码的意义吗？
@AlexanderO'Mara 编辑了答案：）
更好。您不会碰巧知道为什么 2 个常规空格和只有 1 个空格的 "A " 有效，但 "\f16c "; 不是吗？我觉得这很奇怪。
谢谢！它就像一个魅力:)
正如我在答案中提到的，\00a0 是内容属性中使用的不间断空格的十六进制代码。我们不能直接使用在内容属性中。因此，出于这个原因，我们使用的是十六进制代码。更多信息evotech.net/blog/2007/04/named-html-entities-in-numeric-order

【解决方案2】：

是的，使用\a0 它是&nbsp; 或不间断空格。

.stackoverflow::before {
    font-family: 'FontAwesome';
    content: "\f16c\a0\a0\a0\a0\a0\a0";
}

<html>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
  <a class="stack-link stackoverflow" href="http://stackoverflow.com">StackOverflow</a>
</html>

【讨论】：

我认为目的是在图标后添加间距。