删除 li 内的水平和垂直线

Question

我一直在尝试去除孩子附近的水平和垂直线，但无法实现。这会很有帮助，因为我已经尝试了一天多了

我附上了js小提琴供参考需要删除附近的蓝色水平线和垂直线。我无法删除父项中的行。我一直在使用伪元素和类，但无法实现它

.tree{
    --spacing : 1.5rem;
    --radius  : 10px;
  }
  
  .tree li{
    display      : block;
    position     : relative;
    padding-left : calc(2 * var(--spacing) - var(--radius) - 2px);
  }
  
  .tree ul{
    margin-left  : calc(var(--radius) - var(--spacing));
    padding-left : 0;
    /* border-color: red */
  }
  
  .tree ul li {
    border-left : 2px solid #ddd;
    /* border-color: red */
  }
  
  .tree ul li:last-child{
    border-color : transparent ;
  }
  
  .tree li {

    border-color: red
  }
  
  
  .tree ul li::before{
    content      : '';
    display      : block;
    position     : absolute;
    top          : calc(var(--spacing) / -2);
    left         : -2px;
    width        : calc(var(--spacing) + 2px);
    height       : calc(var(--spacing) + 1px);
    border       : solid #ddd;
    border-width : 0 0 2px 2px;
    border-color: blue
  }
  
  .tree  li ::after{
/*     border-color: blue
     */  }
  
  .tree summary{
    display : block;
    cursor  : pointer;
  }
  
  .tree summary::marker,
  .tree summary::after{
         display:none;
    border-color : transparent;

  }

  .tree summary::after,
  .tree li ::after {
    /* border-color: red */
  }

  .tree summary::marker,
  .tree summary::-webkit-details-marker{
    display : none;
  } 
  
  .tree summary:focus{
    outline : none;
  }
  
  .tree summary:focus-visible{
    outline : 1px dotted #000;
  }
  
  .tree li::after,
  .tree summary::before{
    display       : block;
    position      : absolute;
    top           : calc(var(--spacing) / 2 - var(--radius));
    left          : calc(var(--spacing) - var(--radius) - 1px);
    width         : calc(2 * var(--radius));
    height        : calc(2 * var(--radius));
    border-radius : 50%;
    background    : #ddd;
  }
  
  .tree summary::before{
    content     : '+';
    z-index     : 1;
    color       : #fff;
    line-height : calc(2 * var(--radius) - 2px);
    text-align  : center;
    /* border-color: red */
  }

Answer 1

.tree > li 以 .tree 类的独生子为目标

Answer 2

在你的 CSS 中，删除所有此类选择器

.tree ul li::before

还有这个

.tree ul li