Tree like structure for nested ul li's [duplicate]

Question

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

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 1

Tried a Minimal Complete model for you. Have a look at this:

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

<ul>
  <li>
    Item 1
    <ul>
      <li>
        Item 1-1
        <ul>
          <li>Item 1-1-1</li>
          <li>Item 1-1-2</li>
          <li>Item 1-1-3</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>
    Item 2
    <ul>
      <li>Item 2-1</li>
      <li>Item 2-2</li>
      <li>Item 2-3</li>
    </ul>
  </li>
  <li>
    Item 3
    <ul>
      <li>Item 3-1</li>
      <li>Item 3-2</li>
      <li>Item 3-3</li>
    </ul>
  </li>
  <li>
    Item 4
    <ul>
      <li>Item 4-1</li>
      <li>Item 4-2</li>
      <li>Item 4-3</li>
    </ul>
  </li>
  <li>
    Item 5
    <ul>
      <li>Item 5-1</li>
      <li>Item 5-2</li>
      <li>Item 5-3</li>
    </ul>
  </li>
</ul>

Also I would like you to check this post too: Trees in Twitter Bootstrap.

The CSS, I assume, does things for the below. (something like margin-bottom) I would suggest you to make it above (eg., using margin-top instead of margin-bottom) and that would fix the issue:

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

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

ul.child::before {
    display: none; /* Get rid of this */
    content: '';
    position: absolute;
    width: 1px;
    background: #666;
    top: -9px;
    bottom: 10px;
    left: -14px;
}

Or a quick fix would be:

li:last-child::before {
    display: none;
}