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