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>

I'm little confused as to where the line is _supposed_ to be. The reason the line runs the full height of the document is because there are no positioned ancestors. See here: https://stackoverflow.com/questions/10487292/position-absolute-but-relative-to-parent/10487329 — Turnip, Jul 11 '18 at 17:56

score 1 · Accepted Answer · answered Jul 11 '18 at 17:59

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>

Wow..so easy. I saw something online I liked and tried to copy the CSS for it. I guess it made me go down a rabbit hole I really didn't need to be in. So simple thank you! — rmw, Jul 11 '18 at 18:09

score 1 · Answer 2 · answered Jul 11 '18 at 18:01

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>

score 1 · Answer 3 · answered Jul 11 '18 at 18:05

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>

Adding border line to HTML list with CSS

3 Answers3