<ol class="inside">
  <li>Lorem, ipsum.</li>
  <li>Similique, culpa.</li>
  <li>Atque, vel?</li>
  <li>Repudiandae, expedita.</li>
  <li value="9999">Perferendis, modi.</li>
</ol>

<ol class="outside">
  <li>Lorem, ipsum.</li>
  <li>Similique, culpa.</li>
  <li>Atque, vel?</li>
  <li>Repudiandae, expedita.</li>
  <li value="9999">Perferendis, modi.</li>
</ol>

<ol class="inside-aligned">
  <li>Lorem, ipsum.</li>
  <li>Similique, culpa.</li>
  <li>Atque, vel?</li>
  <li>Repudiandae, expedita.</li>
  <li>Perferendis, modi.</li>
</ol>

<ol class="inside-aligned inside-aligned-right">
  <li>Lorem, ipsum.</li>
  <li>Similique, culpa.</li>
  <li>Atque, vel?</li>
  <li>Repudiandae, expedita.</li>
  <li>Perferendis, modi.</li>
</ol>

.inside {
  list-style-position: inside;
  border-left: 2px solid red;
  padding: 0;
}

.outside {
  list-style-position: outside;
  border-left: 2px solid red;
  padding: 0;
}

.inside-aligned {
  border-left: 2px solid red;
  padding: 0;
  list-style: none;
  counter-reset: li;
}
.inside-aligned li {
  counter-increment: li;
}
@supports (grid-template-columns: subgrid) {
  .inside-aligned {
    display: grid;
    grid-template-columns: min-content 1fr;
  }
  .inside-aligned li {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
  }
}
.inside-aligned li::before {
  content: counter(li) ".";
  margin-right: 0.2rem;
}
.inside-aligned li:last-child::before {
  content: "9999.";
}

.inside-aligned-right li::before {
  text-align: end;
}