html - 表示要素間のセパレータ

Question

Separator 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 |

非表示要素への境界線を取り除くにはどうすればよいですか?

score 4 · Accepted Answer

あなたの質問に対する私のコメントを拡張すると、疑似要素がその仕事をしているようです。

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

基本的にボーダーは:afterを使って要素自体につけられているので、要素が消えると消えてしまいます。

1 に答える 1