Manually insert personalized <li> List Numbers with spacing

Question

for a website I'm creating, I want to insert list items with different kind of numberings (many are custom) I have to reproduce the same style of the picture below::

so I was thinking that the best solution it is to manually create the left part where you insert the numbering, I want to use list items, manually inserting the numbering but I want to keep the effect that forces the text in line out from underneath the number, like there is when using the 'numbered list' option in Word. What is the most simple solution to do so? Consider that I need to do that sticking to this schema (since I'm using a javascript that enables text to expand/collapse items)

ul,
#myUL {
  list-style-type: none;
}

#myUL {
  margin: 0;
  padding: 0;
}

.caret {
  cursor: pointer;
  user-select: none;
  font-size: 16px;
}

.caret::before {
  content: "\25B6";
  color: black;
  display: inline-block;
  margin-right: 6px;
}

.caret-down::before {
  transform: rotate(90deg);
}

.baret {
  cursor: pointer;
  user-select: none;
}

.baret::before {
  margin-top: 10px;
  content: "\1F4DA";
  color: black;
  display: inline-block;
  margin-right: 6px;
}

.bested {
  display: none;
  margin-left: -40px;
}

.active {
  display: block;
}

.spacing {
  margin-bottom: 10px;
}

.spacing2 {
  margin-left: 20px;
}

<ul class="nested">
  <div class="spacing"></div>
  <li>(1) Something has a cause.</li>
  <li>(2) There are no causal loops.</li>
  <li>(3) Nothing has an infinite causal history.
    <div class="tooltip">ⓘ<span class="tooltiptext">This is causal finitism. Note that causal finitism is consistent with there being actual infinities.</span></div>
  </li>
  <li>(4) So, there is an uncaused cause (1-3).
    <div class="tooltip">ⓘ<span class="tooltiptext">Suppose x causes y, and that everything has a cause. So, y has a cause, z. Since (2) implies all causes are distinct, z must also have a cause, ad infinitum. I.e., x must have an infinite causal history,contra (3). QED.</span></div>
  </li>
  <li>(5) If there is an uncaused cause, God exists.</li>
  <li>(6) Therefore, God exists.</li>
  <li><span class="baret"> </span>
    <ul class="bested">
      <li>Alexander Pruss, <i>Infinity, Causation, and Paradox</i> (Oxford, 2018). Alexander Pruss, “Paradoxes of Infinity and the First Cause,” in Rasmussen and Vallier (eds.), <i>A New Theist Response to the New Atheists</i> (Routledge, 2020), ch. 1.</li>
    </ul>
</ul>
</li>
</ul>

Answer 1

The easiest way is to use list-style: none and x:before {contents: xyz }

.foo {
  list-style: none;
}

.foo li:nth-of-type(1):before {
  content: "> ";
}

<ul class="foo">
<li>Element One</li>
<li>Element Two</li>
<li>Element Three</li>
</ul>