Стилизация номеров внешнего упорядоченного списка

Question

Можно ли отформатировать номера упорядоченного списка со стилем list-position-style, установленным снаружи? Я хотел бы сделать это, используя только css, если это возможно, поскольку я не могу редактировать html. По сути, я бы хотел, чтобы стилизованные числа с круглым фоном занимали место внешних чисел. Спасибо всем!

 ol {
   list-position-style: outside;
   counter-reset: item;
 }
 li {
   counter-increment: item;
   margin-bottom: 5px;

 }
 li:before {
   margin-right: 10px;
   content: counter(item);
   background: lightblue;
   border-radius: 100%;
   color: white;
   width: 1.2em;
   text-align: center;
   display: inline-block;
 }

<ol>
   <li><span>blah blah blah.</span>
   <ol type="a" class="ol substeps">
   <li>blah blah</li>
     <li>blah</li>
     </ol>
</li>
  <li>blah blah blah blah</li>
</ol>

Answer 1

Во-первых, это не list-position-style, это list-style-position. В любом случае, просто list-style: none;, чтобы скрыть числа, затем примените position: relative; к li и position: absolute; к :before. Просто взгляните на то, что я сделал ниже:

ol {
   list-style: none;
   counter-reset: item;
 }
 li {
   counter-increment: item;
   margin-bottom: 5px;
    position: relative;
 }
 li:before {
   margin-right: 10px;
   content: counter(item);
   background: lightblue;
   border-radius: 100%;
   color: white;
   width: 1.2em;
   text-align: center;
   display: inline-block;
   position: absolute;
   left: -25px;
 }

<ol>
   <li><span>blah blah blah.</span>
   <ol type="a" class="ol substeps">
   <li>blah blah</li>
     <li>blah</li>
     </ol>
</li>
  <li>blah blah blah blah</li>
</ol>