使用 ::before 选择器添加空白 [重复]
Posted
技术标签:
【中文标题】使用 ::before 选择器添加空白 [重复]【英文标题】：Add whitepaces with ::before selector [duplicate] 【发布时间】：2016-10-04 22:46:52 【问题描述】：我试过了，但是没用：
.***::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 ***" href="http://***.com">***</a>我们可以用::before 选择器和content 属性添加空格吗？
【问题讨论】：
可以加边距吗？ 这很奇怪......如果我再添加 1 个空格，或者用另一个字符替换图标本身，它就可以工作...... ^ 这种看似奇怪的行为在那边得到了解决。转义序列后的第一个空格是定义它结束的分隔符。 @AlexanderO'Mara 感谢您的参考。这就是我真正想了解的:) 【参考方案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; 或不间断空格。
.***::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 ***" href="http://***.com">***</a>
</html>【讨论】：
我认为目的是在图标后添加间距。以上是关于使用 ::before 选择器添加空白 [重复]的主要内容，如果未能解决你的问题，请参考以下文章
使用 JQuery 更改 :before css 选择器的宽度属性 [重复]