Tree like structure for nested ul li's
<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>