求助：如何移除树形结构li元素内的水平与竖直线条

我尝试移除子元素附近的水平和竖直线条，折腾了一天多都没成功，试了伪元素和类都没用。我想实现标准树形视图的效果（无多余线条的层级结构），但当前代码里父元素内的这些线条始终无法移除。

当前使用的CSS代码：

.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 */
  }

解决方法 #

问题根源在于你给.tree ul li::before手动设置了border-color: blue，同时部分测试样式干扰了正常显示。按以下步骤修改：

1. 移除.tree ul li::before中的border-color: blue，恢复线条和其他元素一致的颜色；
2. 删除.tree li中的border-color: red测试样式；
3. 给.tree summary添加相对定位和z-index，避免线条覆盖圆形展开按钮。

修改后的完整CSS代码：

.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;
}

.tree ul li {
    border-left : 2px solid #ddd;
}

.tree ul li:last-child{
    border-color : transparent;
}

.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;
}

.tree summary{
    display : block;
    cursor  : pointer;
    position: relative;
    z-index: 1;
}

.tree summary::marker,
.tree summary::after{
    display:none;
    border-color : transparent;
}

.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;
}

内容的提问来源于stack exchange，提问作者Yogesh Kumar