Avoid multiple uls to create a "diagonal" list - html

Question

I am trying to create a slanted/diagonal list, but want to avoid having several nested uls, is there a way to do this, here is the code I have so far:
<ul className={style.steps}>
<li>
<p className={style.step}>Lorem</p>
<ul className={style.steps}>
<li>
<p className={style.step}>Ipsum</p>
<ul className={style.steps}>
<li>
<p className={style.step}>dolor</p>
<ul className={style.steps}>
<li>
<p className={style.step}>sit</p>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>

Answer 1

If you can update how the code outputs, you don't need nth-selectors, especially if the list is dynamic and changes length, you can use CSS vars.
You can set a default value using :root, then you can add the custom property value on each li element --index: number. You can change the CSS var on the element to whatever you need.
:root {
--margin-value: 10px;
}
ul,
li {
margin: 0;
padding: 0;
}
li {
margin-left: calc(var(--index) * var(--margin-value));
}
<ul>
<li style="--index: 1">One</li>
<li style="--index: 2">Two</li>
<li style="--index: 3">Three</li>
<li style="--index: 4">Four</li>
<li style="--index: 5">Five</li>
</ul>

Answer 2

The :nth-child selector would allow you to set different spacing rules on different <li>s within a single list.
https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child
ul {
list-style: none;
}
ul li:nth-child(1) {
margin-left: 0;
}
ul li:nth-child(2) {
margin-left: 30px;
}
ul li:nth-child(3) {
margin-left: 60px;
}
ul li:nth-child(4) {
margin-left: 90px;
}
<ul>
<li>Lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li>sit</li>
</ul>

Answer 3

You did not use the javascript tag, but it could be handy here , so not really an answer but another approach.
Demo below:
var elMargin = 0;
for (let e of document.getElementsByClassName('indent')) {
elMargin = elMargin + 1;
e.style.marginLeft = elMargin + 'em';
}
ul {counter-reset:lis}
li:before{counter-increment:lis;content:counter(lis);
<ul>
<li class="indent"></li>
<li class="indent"></li>
<li class="indent"></li>
<li class="indent"></li>
<li class="indent"></li>
<li class="indent"></li>
<li class="indent"></li>
</ul>