Separator between visible elements

Question

I have a similar problem like Separators between elements without hacks, but do not want to show the separator if the element on the left left or right is invisible.

The elements:

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

together with the CSS:

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

get rendered nicely:

1 | 2 | 3 | 4

As soon as 1 or 4 become invisible with display:none

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

there is a problem:

| 2 | 3 |

How do I get rid of the border to the invisible elements?

Answer 1

Expanding on my comment to your question, a pseudo-element seems to do the job.

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;
}

gives you:

1 | 3 | 4

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

Essentially, since the border is attached to the element itself using :after, it disappears when the element disappears.