css :before content spacing

Question

Using CSS to create a horizontal navigation I want to use a divider between the elements.

using:

li:before
{
  content: " | ";
}

I get a divider. But i wanna use a margin between the text and the divider

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

how can I set a margin to the above question mark? With a margin-left (or padding-left) the margin will exist in front of the divider, not between the divider and the content.

Answer 1

As a quick hack, you can add a non-breaking space by using the escaped unicode for it:

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

See this fiddle.

But the better solution is to set a margin-left AND margin-right (or padding) for the pseudo element:

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

See this fiddle.

Answer 2

try this one

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