Tree like structure for nested ul li's

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/

This might help : [Dashed-styled list linking divs](http://stackoverflow.com/a/24658940/1811992) — web-tiki, Jan 05 '16 at 12:33
Hello Mohsin, Can you please share the code for showing + and - like folder structure? — Curious_k.shree, Oct 26 '16 at 06:48

score 12 · Answer 1 · edited Dec 14 '17 at 23:29

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

The quick fix won't work because it will hide for all the last child. I would try the other one. — mohsinali1317, Jan 05 '16 at 11:58
It does not works when you have only one child without replacing ul li:last-child::before {display: none;} with ul li:not(:first-child):last-child::before {display: none;} ul li:first-child:last-child::before {content: " "; position: absolute; width: 1px; background-color: #000; top: 5px; bottom: 7px; left: -10px;} — luxigo, Dec 02 '17 at 20:25
Update to my previous reply: we must add "height: 7px;" to "ul li:first-child:last-child::before", to stop the vertical bar in case the only-child has children (also we can use ":only-child" instead of ":first-child:last-child") — luxigo, Dec 05 '17 at 08:43
@PraveenKumar done, feel free to delete the css that comes after the snippet, I dont know what to do with it :-) — luxigo, Dec 14 '17 at 21:25

score 1 · Accepted Answer · answered Jan 05 '16 at 12:33

1

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/

answered Jan 05 '16 at 12:33

Jamie Barker

8,145
3
29
64

1

https://gist.github.com/dylancwood/7368914 – Alex Jul 23 '20 at 12:59

score -1 · Answer 3 · answered Jan 05 '16 at 12:52

Use Like this :

<ul>
<li>Yahho</li>
<li>stein
<ul>
<li>1
  <ul>
  <li>11
    <ul>
    <li>111</li>
    <li>112</li>
    <li>113</li>
    </ul></li>
  <li>12</li>
  <li>13</li>
  </ul></li>
<li>2</li>
<li>3</li>
</ul>
</li>
<li>sand</li>
<li>leire</li>
<li>messar</li>
<li>jord</li>
<li>fly</li>
</ul>

Tree like structure for nested ul li's

3 Answers3