外部有序列表的样式数

Question

是否可以将 list-position-style 设置为 outside 来格式化有序列表的数字？如果可能，我想只使用 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>

外部有序列表的样式数

Styling numbers of outside ordered list

html

css

html-lists