css - CSS：如何在元素内容之前添加空格？

Question

以下代码均无效：

p:before { content: " "; }
p:before { content: " "; }

如何在元素内容之前添加空格？

注意：我需要为左边框和左边框着色以供语义使用，并将空格用作无色边距。:)

Answer 1

您可以使用非中断空间的 unicode ：

p:before { content: "\00a0 "; }

参见JSfiddle 演示

[@Jason Sperske 改进的风格]

Answer 2

不要在插入空格时放屁。一方面，旧版本的 IE 不知道你在说什么。但是，除此之外，通常还有更清洁的方法。

对于无色缩进，使用text-indent属性。

p { text-indent: 1em; }

JSFiddle 演示

编辑：

如果您希望空间被着色，您可以考虑为第一个字母添加粗左边框。（我几乎但不完全说“相反”，因为如果您同时使用两者，缩进可能是一个问题。但对我来说，仅仅依靠边框来缩进感觉很脏。）您可以指定多远，以及颜色使用第一个字母的左边距/填充/边框宽度的宽度。

p:first-letter { border-left: 1em solid red; }

演示

Answer 3

/* Most Accurate Setting if you only want
   to do this with CSS Pseudo Element */
p:before { 
   content: "\00a0";
   padding-right: 5px; /* If you need more space b/w contents */
}

Answer 4

由于您正在寻找在元素之间添加空间，您可能需要像左边距或左边距一样简单的东西。以下是http://jsfiddle.net/BGHqn/3/的示例

这将在段落元素的左侧添加 10 个像素

p {
    margin-left: 10px;
 }

或者如果您只想在段落元素中添加一些填充

p {
    padding-left: 10px;
}