How can I indent every sibling in an ul > li structure?

Question

I have a simple structure that represents the parents of current navigation (like breadcrumbs).

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

ul > li {
  padding: 0;
  margin: 0;
  display: flex;
}

ul > li ~ li:before {
  content: '⤷';
  display: inline-block;
  padding: 0 5px;
}

/* I want to make this part dynamic to cover an infinite amount of child nodes: */
ul > li ~ li ~ li {
  padding-left: 20px;
}

ul > li ~ li ~ li ~ li {
  padding-left: 40px;
}

ul > li ~ li ~ li ~ li ~ li {
  padding-left: 60px;
}

<ul>
<li>Parent #1</li>
<li>One more parent</li>
<li>Another parent</li>
<li>A very long item with potential page break,<br /> br tag just used as an example</li>
<li>Current item</li>
</ul>

How can I make the left padding of each li sibling 20px extra compared to the sibling before? I cannot change the html and I cannot use javascript.

Edit: The item text can have one or more lines (automatic word break, if the subject is to long). I've modified the example to cover the case where a line break occurs.

Answer 1

You can use a counter, using system "symbolic".

In the snippet, I have used a visible symbol to show how it works.

Replace this with an Unicode symbol that is equivalent to whitespace, and you will have it working.

@counter-style pad {
 system: symbolic;
 symbols:" ";   /* unicode U+2003 */
 suffix: " ";
}


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

ul > li {
  padding: 0;
  margin: 0;
  display: flex;
}

ul > li:nth-child(even):before {
  counter-increment: section;  
  content:  counter(section, pad) '⤷';
  display: inline-block;
  padding: 0 5px 0 0;
  font-size: 20px;
 
}

ul > li:nth-child(1):before {
   padding: 0px 5px 0px 20px;
  content: '⤷';
  display: inline-block;
}

ul > li:nth-child(3):before {
   padding: 0px 5px 0px 40px;
  content: '⤷';
  display: inline-block;
}
ul > li:nth-child(5):before {
   padding: 0px 5px 0px 60px;
  content: '⤷';
  display: inline-block;
}
ul > li:nth-child(7):before {
   padding: 0px 5px 0px 80px;
  content: '⤷';
  display: inline-block;
}
ul > li:nth-child(9):before {
   padding: 0px 5px 0px 100px;
  content: '⤷';
  display: inline-block;
}

<ul>
<li>Parent #1</li>
<li>Parent #1</li>
<li>One more parent</li>
<li>One more parent</li>
<li>Another parent</li>
<li>Another parent</li>
<li>A very long item with potential page break,<br /> br tag just used as an example</li>
<li>A very long item with potential page break,<br /> br tag just used as an example</li>
<li>Current item</li>
<li>Current item</li>
</ul>

Another possibility is to use spaces as symbol, and set 'whitespace: pre' on the pseudo before:

@counter-style pad {
 system: symbolic;
 symbols: '      ';
 suffix: " ";
}


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

ul > li {
  padding: 0;
  margin: 0;
  display: flex;
}

ul > li ~ li:before {
  counter-increment: section;  
  content:  counter(section, pad) ' ⤷';
  white-space: pre;
  display: inline-block;
  padding: 0 5px;
}

<ul>
<li>Parent #1</li>
<li>One more parent</li>
<li>Another parent</li>
<li>A very long item with potential page break,<br /> br tag just used as an example</li>
<li>Current item</li>
</ul>