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

以下代码均不起作用:

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

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

注意: 我需要颜色的 边界左边和 左边距的语义使用和使用的空间作为一个无色的边缘。:)

164632 次浏览
小开
最佳答案

您可以使用 不换行空格的 Unicode 密码点:

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

参见 Rel = “ nofollow noReferrer”> JSfiddle demo (风格改进的 作者: Jason Sperske)。

小开

不要随便插入空格。首先，旧版本的 IE不知道你在说什么。除此之外，总的来说还有更干净的方法。

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

p { text-indent: 1em; }

JSFiddle 演示

如果希望空间着色，可以考虑在第一个字母后面添加一个粗左边框。(我几乎会说“相反”，因为如果同时使用两个缩进，那么缩进可能会成为一个问题。但对我来说，仅仅依靠边界来缩进是很肮脏的。)您可以使用第一个字母的左边距/填充/边框宽度来指定颜色的距离和宽度。

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

演示

小开

因为要在元素之间添加空格，所以可能需要像 左边距或 向左填充这样简单的东西。以下是两者的例子(http://jsfiddle.net/BGHqn/3/) :

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

p {
margin-left: 10px;
}

或者如果您只是想在段落元素中添加一些空白

p {
padding-left: 10px;
}
小开 
/* 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 */
}

提交答案