Render multilevel nested list with indentation on names but without translating left border too

Question

I need to create an html+css multilevel nested list with the following requirements:

• every item of the list has a left border vertically aligned with all the others. The active element's border should be highlighted
• every item can contain other items, in this case its children items' name - but not the left border - should have a left offset (let's say 5 pixels padding)
• there is no knowledge concerning the number of nested levels of the list, so the solution should be generic
• it's possible to use any HTML element (div, ul, il... )

Here's the expected result:

EDIT: I've tried multiple implementations and solutions so far including:

• using ul + li and removing list-style-type and padding properties
• using a flat (one level) div list

but all of them created a new inducted problem: how to dynamically indent elements? I tried to use css counters to count indentation level (which I would then multiply by the offset to set the padding-left property of an item) but it seems they cannot be used other than inside content CSS property

Answer 1

I think this is what you're looking for http://codepen.io/yez/pen/jPLMYM Basically you define a border for every li but remove it for li ul li

ul {
  list-style-type: none;
}

li {
  border-left: 1px solid #000;
  padding-left: 5px;
}

li ul li {
  border: 0;
}

Answer 2

FYI, this seems to be a valid pure CSS solution to the challenge:

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.container {
  position: relative;
}

ul {
  padding-left: 10px;
}

li {
  line-height: 15px;
  padding-bottom: 3px;
}

li:after {
  position: absolute;
  content: "";
  left: 0;
  border-left: 3px solid #F88;
  height: 15px;
}

li.active:after {
  border-left: 3px solid blue;
}

http://plnkr.co/edit/mIWQwg9z8flqEIlXWCF6?p=preview

hope it helps!