title: Tree like structure for nested ul li's
body: <p>I have made a tree like structure from under order list. The output looks like this</p>
  
  <p><a href="https://i.stack.imgur.com/T6kii.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/T6kii.png" alt="enter image description here"></a></p>
  
  <p>The issue is the red circle in the image. So I don't want to show that line if I don't have any further levels but that shows up. I am unable to solve this.</p>
  
  <p>The css to show the lines is as follows</p>
  
  <pre><code>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;
  }
  </code></pre>
  
  <p>The structure of my html is as follows</p>
  
  <pre><code>&lt;ul class="tree"&gt;
  &lt;li id="" class="has-children showChildren"&gt;
      &lt;i class="fi-minus"&gt;&lt;/i&gt;
  
      &lt;div class="checkBoxDesign"&gt;
          &lt;input type="checkbox" name="massTypeId" class="massTypeTreeId" id="t_8587509197182534205xy9w" value="8587509197182534205xy9w"&gt;
          &lt;label for="t_8587509197182534205xy9w"&gt;&lt;/label&gt;
      &lt;/div&gt;
      &lt;span class="text"&gt;Sand&lt;/span&gt;
      &lt;ul class="child"&gt;
          &lt;li id="8587509198220874655a1s8" class="has-children showChildren"&gt;
              &lt;i class="fi-minus"&gt;&lt;/i&gt;
              &lt;div class="checkBoxDesign"&gt;
                  &lt;input type="checkbox" name="massTypeId" class="massTypeTreeId" id="t_8587509198220874655a1s8" value="8587509198220874655a1s8"&gt;
                  &lt;label for="t_8587509198220874655a1s8"&gt;&lt;/label&gt;
              &lt;/div&gt;
              &lt;span class="text"&gt;Fyllgrus&lt;/span&gt;
              &lt;ul class="child"&gt;
                  &lt;li id="8587496127195835630dojv" class="has-children showChildren"&gt;
                      &lt;i class="fi-minus"&gt;&lt;/i&gt;
                      &lt;div class="checkBoxDesign"&gt;
                          &lt;input type="checkbox" name="massTypeId" class="massTypeTreeId" id="t_8587496127195835630dojv" value="8587496127195835630dojv"&gt;
                          &lt;label for="t_8587496127195835630dojv"&gt;&lt;/label&gt;
                      &lt;/div&gt;
  
                      &lt;span class="text"&gt;sub sub sub sub&lt;/span&gt;
                      &lt;ul class="child"&gt;
                          &lt;li id="8587496127026996853ltmu"&gt;
                              &lt;i class="leafNodes"&gt;&lt;/i&gt;
                              &lt;div class="checkBoxDesign"&gt;
                                  &lt;input type="checkbox" name="massTypeId" class="massTypeTreeId" id="t_8587496127026996853ltmu" value="8587496127026996853ltmu"&gt;
                                  &lt;label for="t_8587496127026996853ltmu"&gt;&lt;/label&gt;
                              &lt;/div&gt;
  
                              &lt;span class="text"&gt;sub sub&lt;/span&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;li id="8587496924061602638qkdo" class="has-children showChildren"&gt;
                      &lt;i class="fi-minus"&gt;&lt;/i&gt;
                      &lt;div class="checkBoxDesign"&gt;
                          &lt;input type="checkbox" name="massTypeId" class="massTypeTreeId" id="t_8587496924061602638qkdo" value="8587496924061602638qkdo"&gt;
                          &lt;label for="t_8587496924061602638qkdo"&gt;&lt;/label&gt;
                      &lt;/div&gt;
                      &lt;span class="text"&gt;sub sub&lt;/span&gt;
                      &lt;ul class="child"&gt;
                          &lt;li id="8587496231036093626v5ql"&gt;
                              &lt;i class="leafNodes"&gt;&lt;/i&gt;
                              &lt;div class="checkBoxDesign"&gt;
                                  &lt;input type="checkbox" name="massTypeId" class="massTypeTreeId" id="t_8587496231036093626v5ql" value="8587496231036093626v5ql"&gt;
                                  &lt;label for="t_8587496231036093626v5ql"&gt;&lt;/label&gt;
                              &lt;/div&gt;
  
                              &lt;span class="text"&gt;sub sub sub&lt;/span&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
  
                  &lt;/li&gt;
              &lt;/ul&gt;
  
          &lt;/li&gt;
          &lt;li id="8587509198127281697em9f"&gt;
              &lt;i class="leafNodes"&gt;&lt;/i&gt;
              &lt;div class="checkBoxDesign"&gt;
                  &lt;input type="checkbox" name="massTypeId" class="massTypeTreeId" id="t_8587509198127281697em9f" value="8587509198127281697em9f"&gt;
                  &lt;label for="t_8587509198127281697em9f"&gt;&lt;/label&gt;
              &lt;/div&gt;
  
              &lt;span class="text"&gt;Siltholdig&lt;/span&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p></p>
  
  <p>Here is a fiddle that somehow shows the issues
  <a href="https://jsfiddle.net/8s48m07a/5/" rel="nofollow noreferrer">https://jsfiddle.net/8s48m07a/5/</a></p>