Chaudhry Mohsin Ali Chaudhry Mohsin Ali - 4 years ago 224
HTML Question

Tree like structure for nested ul li's

I have made a tree like structure from under order list. The output looks like this

enter image description here

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.

The css to show the lines is as follows

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


The structure of my html is as follows

<ul class="tree">
<li id="" class="has-children showChildren">
<i class="fi-minus"></i>

<div class="checkBoxDesign">
<input type="checkbox" name="massTypeId" class="massTypeTreeId" id="t_8587509197182534205xy9w" value="8587509197182534205xy9w">
<label for="t_8587509197182534205xy9w"></label>
</div>
<span class="text">Sand</span>
<ul class="child">
<li id="8587509198220874655a1s8" class="has-children showChildren">
<i class="fi-minus"></i>
<div class="checkBoxDesign">
<input type="checkbox" name="massTypeId" class="massTypeTreeId" id="t_8587509198220874655a1s8" value="8587509198220874655a1s8">
<label for="t_8587509198220874655a1s8"></label>
</div>
<span class="text">Fyllgrus</span>
<ul class="child">
<li id="8587496127195835630dojv" class="has-children showChildren">
<i class="fi-minus"></i>
<div class="checkBoxDesign">
<input type="checkbox" name="massTypeId" class="massTypeTreeId" id="t_8587496127195835630dojv" value="8587496127195835630dojv">
<label for="t_8587496127195835630dojv"></label>
</div>

<span class="text">sub sub sub sub</span>
<ul class="child">
<li id="8587496127026996853ltmu">
<i class="leafNodes"></i>
<div class="checkBoxDesign">
<input type="checkbox" name="massTypeId" class="massTypeTreeId" id="t_8587496127026996853ltmu" value="8587496127026996853ltmu">
<label for="t_8587496127026996853ltmu"></label>
</div>

<span class="text">sub sub</span>
</li>
</ul>
</li>
<li id="8587496924061602638qkdo" class="has-children showChildren">
<i class="fi-minus"></i>
<div class="checkBoxDesign">
<input type="checkbox" name="massTypeId" class="massTypeTreeId" id="t_8587496924061602638qkdo" value="8587496924061602638qkdo">
<label for="t_8587496924061602638qkdo"></label>
</div>
<span class="text">sub sub</span>
<ul class="child">
<li id="8587496231036093626v5ql">
<i class="leafNodes"></i>
<div class="checkBoxDesign">
<input type="checkbox" name="massTypeId" class="massTypeTreeId" id="t_8587496231036093626v5ql" value="8587496231036093626v5ql">
<label for="t_8587496231036093626v5ql"></label>
</div>

<span class="text">sub sub sub</span>
</li>
</ul>

</li>
</ul>

</li>
<li id="8587509198127281697em9f">
<i class="leafNodes"></i>
<div class="checkBoxDesign">
<input type="checkbox" name="massTypeId" class="massTypeTreeId" id="t_8587509198127281697em9f" value="8587509198127281697em9f">
<label for="t_8587509198127281697em9f"></label>
</div>

<span class="text">Siltholdig</span>
</li>
</ul>
</li>




Here is a fiddle that somehow shows the issues
https://jsfiddle.net/8s48m07a/5/

Answer Source

If your list is on a simple one colour background, you can overlay it with :after:

ul.child > li:last-child li:after {
  content: '';
  position: absolute;
  width: 1px;
  background: #F3F5F6; /* background of the site */
  top: -9px;
  bottom: 4px;
  left: -27px;
}

https://jsfiddle.net/8s48m07a/7/

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download