Having :before decoration not being part of the link

Question

I'm building a link list:

<ul>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
</ul>

Wanting them to appear as a link bar I add the CSS:

li { display: inline-block; }

Then, I would like to add a small content between the links using CSS, so :

li :before { content: "+"; }

And here is the problem, the + is integrated to the <a> inside the <li>.

Why is it so ? I'm using li:before, not a:before !
How can I prevent it ?

Here's a JSFiddle showing it : http://jsfiddle.net/KY58h/

Answer 1

Make the syntax correct. Not

li :before {

but

li:before {

forked fiddle -> http://jsfiddle.net/LsMq2/

Answer 2

Remove space between li & :before in your css.

Answer 3

You can use a image for the purpose.

ul li + li {
    background:url('seperator.gif') no-repeat top left;
    padding-left: 10px
}