可见元素之间的分隔符

Question

我遇到类似Separators between elements without hacks的类似问题，但如果左侧或右侧的元素不可见，则不希望显示分隔符。

要素：

<a>1</a> <a>2</a> <a>3</a> <a>4</a>

与CSS一起使用：

a + a {
    border-left: 1px solid black;
}

很好地渲染：

1 | 2 | 3 | 4

只要1或4与display:none

不可见

<a style="display:none">1</a> <a>2</a> <a>3</a> <a style="display:none">4</a>

有一个问题：

| 2 | 3 |

如何摆脱隐形元素的边界？

Answer 1

扩展我对你的问题的评论，一个伪元素似乎可以完成这项工作。

<强> HTML：

<a>1</a> <a style="display:none">2</a> <a>3</a> <a>4</a>

<强> CSS：

a+a:before {
    content:"";
    border-right:solid 1px black;
}

给你：

1 | 3 | 4

http://jsfiddle.net/hv7HX/1/

基本上，由于边框使用：after附加到元素本身，因此当元素消失时它会消失。