可見元素之間的分隔符

Question

我有一個類似的問題，如Separators between elements without hacks，但不想顯示分隔符，如果左側或右側的元素不可見。

元素：

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

與CSS

一起：只要1或4變得不可見與display:none

1 | 2 | 3 | 4 

：

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

得到很好地呈現

<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，它在元素消失時消失。