どのようにCSSを使って以下のような行を描くことができますか？

Question

この構造をテキストボックス間に描画したいと思います。私は私の時間をかけたが、引き分けなかった。

textbox1 --- | | --- textbox2 textbox3 --- | | --- textbox4 textbox5 --- | | --- textbox6 textbox7 --- | | --- textbox8

Answer 1

div { 
 
    margin-bottom: 3px; 
 
    font-family: monospace, sans-serif; 
 
} 
 

 
div:nth-child(odd) { 
 
    border-right: 1px solid black; 
 
    text-align: right; 
 
    width: 50%; 
 
} 
 

 
div:nth-child(even) { 
 
    border-left: 1px solid black; 
 
    margin-left: 50%; 
 
} 
 

 
div:nth-child(odd)::after, 
 
div:nth-child(even)::before { 
 
    content: '---' 
 
}

<div>textbox1</div> 
 
<div>textbox2</div> 
 
<div>textbox3</div> 
 
<div>textbox4</div> 
 
<div>textbox5</div> 
 
<div>textbox6</div> 
 
<div>textbox7</div> 
 
<div>textbox8</div>