树状结构为嵌套的ul li

我从订单列表下面做了一个树状的结构.输出看起来像这样

问题是图像中的红色圆圈.所以如果我没有任何进一步的水平但是显示出来,我不想显示那条线.我无法解决这个问题.

显示线条的css如下

li::before {
    content: '';
    position: absolute;
    height: 1px;
    background: #666;
    top: 11px;
    width: 30px;
    left: -17px;
}

ul.child::before {
    content: '';
    position: absolute;
    width: 1px;
    background: #666;
    top: -9px;
    bottom: 10px;
    left: -14px;
}

我的html结构如下

    

    

        
        
    
    Sand
    

        

            
            

                
                
            
            Fyllgrus
            

                

                    
                    

                        
                        
                    

                    sub sub sub sub
                    

                        

                            
                            

                                
                                
                            

                            sub sub
                        
                    
                
                

                    
                    

                        
                        
                    
                    sub sub
                    

                        

                            
                            

                                
                                
                            

                            sub sub sub
                        
                    

                
            

        
        

            
            

                
                
            

            Siltholdig
        
    

这是一个小提琴,以某种方式显示问题 https://jsfiddle.net/8s48m07a/5/

为你尝试了一个最小的完整模型.看看这个:

* {margin: 0; padding: 0; list-style: none;}
ul li {
  margin-left: 15px;
  position: relative;
  padding-left: 5px;
}
ul li::before {
  content: " ";
  position: absolute;
  width: 1px;
  background-color: #000;
  top: 5px;
  bottom: -12px;
  left: -10px;
}
body > ul > li:first-child::before {top: 12px;}
ul li:not(:first-child):last-child::before {display: none;}
ul li:only-child::before {
  display: list-item;
  content: " ";
  position: absolute;
  width: 1px;
  background-color: #000;
  top: 5px;
  bottom: 7px;
  height: 7px;
  left: -10px;
}
ul li::after {
  content: " ";
  position: absolute;
  left: -10px;
  width: 10px;
  height: 1px;
  background-color: #000;
  top: 12px;
}

  

    Item 1
    

      

        Item 1-1
        

          
Item 1-1-1
          
Item 1-1-2
          
Item 1-1-3
        
      
    
  
  

    Item 2
    

      
Item 2-1
      
Item 2-2
      
Item 2-3
    
  
  

    Item 3
    

      
Item 3-1
      
Item 3-2
      
Item 3-3
    
  
  

    Item 4
    

      
Item 4-1
      
Item 4-2
      
Item 4-3
    
  
  

    Item 5
    

      
Item 5-1
      
Item 5-2
      
Item 5-3