コンテンツの周囲にダイナミックな括弧の境界線を作成する方法は？

Question

この灰色の括弧をリストの右側に追加しようとしています。私は各項目の周りのdivで周りを遊んでみましたが、項目はいくつかの他のタグと余白のスペースの上下で区切られています。また、上の境界の表示の一部だけを取得する方法もわかりません。選択した項目が展開されている場合は、ブラケットを展開して整列したままにする必要があります。

CSSの推奨事項はありますか？

私は今でよここはhttps://jsfiddle.net/ux9dxoa9/

ある

.item { 


float: left; 
     clear:left; 
    border: 2px solid red; 
    padding: 8px 0px; 
    height: 100px; 
    width: 100px; 
} 
.other_div{ 
    float: left; 
    padding: 18px 0px; 
    height: 100px; 
    width: 100px; 
} 

Answer 1

あなたは私たちが提案するかもしれない任意のCSSが完全に依存して擬似要素

* { 
 
    margin: 0; padding: 0; box-sizing: border-box; 
 
} 
 

 
.outer { 
 
    display: inline-block; 
 
    border-right: 1px solid #ddd; 
 
    margin-left: 30px; 
 
} 
 

 
.outer, .outer > li { 
 
    position: relative; 
 
} 
 

 
.outer > li { 
 
    padding: 1em; 
 
} 
 

 
.outer:before, .outer:after, .outer > li:not(:first-child):before { 
 
    content: ''; 
 
    position: absolute; 
 
    width: .5em; 
 
    height: 1px; 
 
    background: #ddd; 
 
} 
 

 
.outer:before, .outer:after, .outer > li:before, .outer > li:after { 
 
    right: 0; 
 
} 
 

 
.outer:before, .outer > li:before { 
 
    top: 0; 
 
} 
 

 
.outer:after, .outer > li:after { 
 
    bottom: 0; 
 
}

<ul class="outer"> 
 
    <li>item</li> 
 
    <li>item</li> 
 
    <li>nested 
 
    <ul> 
 
     <li>nested</li> 
 
     <li>nested</li> 
 
     <li>nested</li> 
 
    </ul> 
 
    </li> 
 
    <li>item</li> 
 
    <li>item</li> 
 
</ul>