拥有：装饰前不是链接的一部分

Question

我正在构建一个链接列表：

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

希望它们显示为链接栏我添加了CSS：

li { display: inline-block; }

然后，我想使用CSS在链接之间添加一个小内容，所以：

li :before { content: "+"; }

问题是，+已集成到<a>内的<li>。

为什么会这样？我使用li:before，而不是a:before！
我该如何预防？

这是一个JSFiddle，显示它：http://jsfiddle.net/KY58h/

Answer 1

删除li＆amp;之间的空格你的css中:before。

Answer 2

使语法正确。不是

li :before {

但是

li:before {

分叉小提琴 - ＆gt;的 http://jsfiddle.net/LsMq2/

Answer 3

您可以将图像用于此目的。

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