Adding border line to HTML list with CSS

Question

I have a list of elements that I would like to connect via a bordering line. This line should be limited to each parent but should touch all children of the parent (for each parent in the list). My problem as you can see from a screenshot is that my line goes through the entire page top to bottom and doesn't seem to conform to the height of the parent nor cut off when each child list stops.

Ideally, there would be two separate lines in this picture with one between test1 and test2 and another that goes from test2 to the end of the whole list (with some buffer room between parent and line so they aren't touching).

Any thoughts? I have tried for hours to add different styles to try and limit the lines height but nothing has worked. Thank you!

#test ul li ul li::before {
  content: "";
  display: block;
  position: absolute;
  z-index: 1;
  left: 50px;
  top: 0;
  bottom: 0;
  max-height: 100%;
  border-left: 1px solid #7A7A7A;
}

<div id="test">
  <ul>
    <li>
      test1
      <ul>
        <li>
          1
        </li>
        <li>
          2
        </li>
        <li>
          3
        </li>
        <li>
          4
        </li>
      </ul>
    </li>
    <li>
      test2
      <ul>
        <li>
          1
        </li>
        <li>
          2
        </li>
        <li>
          3
        </li>
        <li>
          4
        </li>
      </ul>
    </li>
  </ul>
</div>

Answer 1

You could also target the parent list items and obtain the same functionality.

#test > ul >li {
  position:relative;
}
#test > ul >li:before {
  content: "";
  position:absolute;;
  border-left:3px solid black;
  height: 85%;
  top:10px;
  left: -15px;
}

<div id="test">
  <ul>
    <li>
      test1
      <ul>
        <li>
          1
        </li>
        <li>
          2
        </li>
        <li>
          3
        </li>
        <li>
          4
        </li>
      </ul>
    </li>
    <li>
      test2
      <ul>
        <li>
          1
        </li>
        <li>
          2
        </li>
        <li>
          3
        </li>
        <li>
          4
        </li>
      </ul>
    </li>
  </ul>
</div>

Answer 2

Not sure about your desired output, check below code if that is what you are trying to do

Now you are line is running through out the page because your are pseudo element is positioned absolute and there is no relative element to it, so by default is relative to the body, that is the reason it is running from top to bottom

    #test ul li ul li {
  position: relative;
}

#test ul li ul li::before {
  content: "";
  display: block;
  position: absolute;
  z-index: 1;
  left: -25px;
  top: 0;
  bottom: 0;
  max-height: 100%;
  border-left: 1px solid #7A7A7A;
}

<div id="test">
  <ul>
    <li>
      test1
      <ul>
        <li>
          1
        </li>
        <li>
          2
        </li>
        <li>
          3
        </li>
        <li>
          4
        </li>
      </ul>
    </li>
    <li>
      test2
      <ul>
        <li>
          1
        </li>
        <li>
          2
        </li>
        <li>
          3
        </li>
        <li>
          4
        </li>
      </ul>
    </li>
  </ul>
</div>

Answer 3

I dont really get what you where trying with your selector:

I thinnk you should change your selector to : #test ul li ul

This will target the next html structure

<element id="test">
  …
    <ul>
      …
        <li>
          …
            <ul>
              …

Hope this helps :>

#test ul li ul {
  border-left: 1px solid red;
}

<div id="test">
  <ul>
    <li>
      test1
      <ul>
        <li>
          1
        </li>
        <li>
          2
        </li>
        <li>
          3
        </li>
        <li>
          4
        </li>
      </ul>
    </li>
    <li>
      test2
      <ul>
        <li>
          1
        </li>
        <li>
          2
        </li>
        <li>
          3
        </li>
        <li>
          4
        </li>
      </ul>
    </li>
  </ul>
</div>