To achieve the desired effect, you can utilize the CSS style border-left.
NOTE - Responding to the original poster's query in the comments
1) To create nested lists with borders displayed infinitely
Simply apply the specified style to ul, which will add a left border to the parent list and all subsequent child lists.
ul {
border-left: 20px solid #000;
}
By adding the border-left to the parent element, the child element's border will also increase. This method works well if you do not require varying border sizes.
2) To customize borders for lists -
Essentially, remove all padding from the lists (i.e., ul) and then add a 20px border-left to the parent list and another 20px border-left to the child list.
For a grandchild ul, the procedure remains the same. By assigning the grandchild class to that ul, the CSS would appear as follows:
ul.grandchild li {
border-left: 30px solid #000;
}
A functioning example with parent and child ul can be seen below -
ul {
list-style-position: none;
padding-left: 0;
}
/* Uncomment the code below for different border sizes */
/*
ul.parent li {
border-left: 20px solid #000;
}
ul.child li {
border-left: 20px solid #000;
}
*/
/* For consistent border sizes across all ul's, a specific class is not required */
ul {
border-left: 20px solid #000;
}
<ul class="parent">
<li>RPG
<ul class="child">
<li>DA</li>
<li>Bioshock</li>
<li>
<ul>
<li>DA</li>
<li>Bioshock</li>
</ul>
</li>
</ul>
</li>
<li>MOBA
<ul class="child">
<li>DOTA</li>
<li>LoL</li>
</ul>
</li>
</ul>
By adding the border-left to the parent element, the border size for the child element automatically increases, as you may have inferred.