如何在内容周围创建动态托架边框？

Question

我试图将这个灰色括号添加到列表的右侧。我尝试在每个项目周围的边框周围玩耍，但项目由几个其他标签和边距空间顶部和底部分开，我也不知道如何获取顶部边框的一部分。如果选定的项目展开，我需要括号展开并保持对齐。

任何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

您可以使用伪元素

* { 
 
    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>