html - 可见元素之间的分隔符

Question

我有类似的问题，例如没有 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 附加到元素本身的，所以当元素消失时它就会消失。