如何使用CSS在元素内容前添加空白？

Question

以下代码都无法正常工作：

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

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

注意：我需要为语义使用着色 border-left 和 margin-left，并使用空白作为无色边距。 :)

- Hugolpz

---

为什么不直接加一个简单的边距呢？ - Cam

或许因为边距/内边距会影响整个区块。在这种情况下，文本缩进可能是更好的选择。 - nice ass

我需要为语义化使用着色边框左侧和左侧边距 :) 我可能会添加几个 element:before { content:"[一种空格]"; background: mycolor;}。无论如何，我想知道一种添加空格的方法，有点有趣！ - Hugolpz

@Hugolpz：你可以使用 p:first-letter { border-left: 1ex solid mycolor; } 基本上做同样的事情。 - cHao

@carn 边缘是静态的，空间宽度相对于字体大小。 - undefined

Answer 1

你可以使用 Unicode代码点 来表示一个 不间断空格：

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

请查看 JSfiddle演示（样式由Jason Sperske改进）。

- Hugolpz

---

我进行了轻微的编辑，这样您就可以看到它的效果：http://jsfiddle.net/uMFHH/3/ （否则它看起来只是一个边距，这带来一个很好的问题，为什么不只是添加一个边距？） - Jason Sperske

因为我需要给边框左侧和外边距左侧上色 :) - Hugolpz

为什么在 "\00a0 " 的末尾要留出空格？这是必需的吗，还是可以只写 "\00a0"？ - jbyrd

@jbyrd：不必要（请参见http://jsfiddle.net/nhyw6e9q/）。我留下它只是为了表明正常的空格没有被考虑进去。 - Hugolpz

Answer 2

不要在插入空格方面瞎搞。首先，较旧版本的IE将不知道你在说什么。此外，总的来说，有更干净的方法。

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

p { text-indent: 1em; }

JSFiddle演示

如果您想将空格着色，可以考虑向第一个字母添加粗左边框。 （我几乎可以说“代替”，因为如果同时使用缩进，缩进可能会成为问题。但是，仅依赖边框进行缩进对我来说感觉不好。）您可以使用第一个字母的左边距/填充/边框宽度来指定颜色离开多远以及宽度大小。

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

演示

- cHao

---

如果你被困在支持IE<8的环境中，这种方法仍然有效，而伪类元素则不行。 - cimmanon

@cimmanon：没错。根据 MDN 的说法，即使在 IE 3 中也可以使用这个（尽管我甚至没有意识到他们那时候已经有 CSS 了 :P）。 - cHao

你不能给缩进添加颜色，例如 { text-indent: 1em; }。但是我们可以给空格添加颜色，例如 :before {content: "\00a0 "; background: #000; }。查看 Fiddle - Hugolpz

@Hugolpz：文本缩进？不行。据我所知，不能以不同颜色进行着色。但是边框呢？当然可以。 :) - cHao

我本来想说在我的情况下我不能使用填充，但是我稍微思考了一下，然后想出了如何做到这一点，这是一个更好的解决方案，至少对于我的情况是这样。 - BillyNair

Answer 3

/* Most accurate setting if you only want
   to do this with a CSS pseudo element */
p:before { 
    content: "\00a0";
    padding-right: 5px; /* If you need more space between contents */
}

- Piyush

Answer 4

如果您想要在元素之间添加空间，您可能需要使用margin-left或padding-left。以下是两个示例(http://jsfiddle.net/BGHqn/3/):

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

p {
    margin-left: 10px;
}

或者如果你只是想在段落元素内添加一些填充

p {
    padding-left: 10px;
}

- Matt