css - 可能隐藏的跨度之间的分隔符

Question

我有多个span，形成一个枚举:

<span class="item">Value 1</span><span class="delim">, </span>
<span class="item">Value 2</span><span class="delim">, </span>
<span class="item">Value 3</span>

当所有 item 都具有 display:inline 时没问题，但是当我将带有 display:none 的类添加到第二个 item 跨度，结果如下所示:

Value 1, , Value 2

我在 CSS 中找不到这个问题的解决方案，并且使用 JS 是不可取的(切换可见性的代码已经非常复杂)。

有什么想法吗？

更新。截至目前，所有提议的解决方案都忽略了一个事实，即任何 item 跨度都可以隐藏或可见，而不仅仅是第二个。问题不仅在于中间的双逗号，还在于末尾多了一个逗号。

Answer 1

仅使用 CSS 的简单解决方案:

.item:before{
    content: ", ";
}
.item:first-child:before{
    content: "";
}

http://jsfiddle.net/8aEhz/