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

Question

以下代码均无效：

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

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

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

原文由 Hugolpz 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用 不间断空格 的 Unicode 代码点：

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

请参阅 JSfiddle 演示（ 由 Jason Sperske 改进的样式）。

原文由 Hugolpz 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

不要乱放空格。其一，旧版本的 IE 不会知道你在说什么。不过，除此之外，通常还有更简洁的方法。

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

 p { text-indent: 1em; }

JSFiddle 演示

如果你想让空间有颜色，你可以考虑在第一个字母上加一个粗的左边框。 （我几乎但不完全说“相反”，因为如果你同时使用这两种缩进，缩进可能会成为一个问题。但我觉得仅仅依靠边框来缩进是很脏的。）你可以指定多远，以及颜色使用第一个字母的左边距/填充/边框宽度的宽度。

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

演示

原文由 cHao 发布，翻译遵循 CC BY-SA 4.0 许可协议