Question

以下代码均无效：

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

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

注意：我需要为border-left和margin-left上色以进行语义使用，并将空格用作无色边距。：）

Answer 1

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

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

参见 JSfiddle demo

[由@Jason Sperske改进的风格]

Answer 2

插入空格时不要放屁。首先，IE的旧版本不会知道你在说什么。除此之外，一般来说还有更清洁的方法。

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

p { text-indent: 1em; }

JSFiddle demo

编辑：

如果您想要将空间着色，可以考虑在第一个字母上添加一个粗左边框。（我几乎 - 但不是说“反而”，因为如果你同时使用这两个缩进可能是一个问题。但是我完全依靠边界来缩进它感觉很脏。）你可以指定多远，以及宽度，颜色使用第一个字母的左边距/填充/边框宽度。

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

Demo

Answer 3

由于您正在寻找在元素之间添加空间，因此您可能需要像边距左侧或左侧填充这样简单的内容。以下是http://jsfiddle.net/BGHqn/3/

的示例

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

p {
    margin-left: 10px;
 }

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

p {
    padding-left: 10px;
}

Answer 4

/* 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 */
}

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

4 个答案: