CSS :before content spacing

Question

使用 CSS 创建水平导航我想在元素之间使用分隔符。

使用:

li:before
{
  content: " | ";
}

我得到一个分隔线。但我想在文本和分隔符之间使用边距

item(margin-right) |(?)item(margin-right)

如何为上面的问号设置边距？对于 margin-left(或 padding-left)，边距将存在于分隔线之前，而不是分隔线和内容之间。

Answer 1

作为快速破解，您可以使用转义的 unicode 添加不间断空格:

li:before {
  content: "\00a0 | \00a0";
}​

参见 this fiddle .

但更好的解决方案是为伪元素设置 margin-left 和 margin-right(或 padding):

li:before {
  content: "|";
  margin-left: 20px;
  margin-right: 20px
}

参见 this fiddle .