外部排序列表的样式编号

Question

是否可以将列表位置样式设置为外部来格式化有序列表的编号？如果可能的话，我只想使用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>