CSS :before伪元素中的内容间距问题

Question

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

使用：

li:before
{
  content: " | ";
}

我想在文字和分割线之间使用外边距，但是我得到了一个分割线。如何为上面的问号设置外边距？使用margin-left（或padding-left）会使外边距存在于分割线之前，而不是分割线和内容之间。

项目（margin-right）|（？）项目（margin-right）

- Luuk Krijnen

Answer 1

可以通过使用转义后的unicode来添加一个不间断空格，作为快速的hack方法：

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

请查看这个示例。

但更好的解决方案是为伪元素设置margin-left和margin-right（或padding）：

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

请查看这个fiddle。

- kremalicious

---

@doublejosh 在这里还能正常工作。你具体遇到了什么问题？请查看我上一个代码块下面的 fiddle。 - kremalicious

糟糕！我有一个杂乱的注释破坏了我的规则。 - doublejosh

Answer 2

试试这个

li:before {
          content: "|";
          padding:0 5px;
        }

- Manish Sharma