有序列表的增量样式不起作用

Question

我试图制作一个带有圆圈背景的排序列表。我确实达到了，但是增加无效。我看到了所有 ol列表的数字1 。 注意：我在不同的部分中有 ol 个片段，直到 5 ，每个片段只有1个 li 标记：

<ol start="1">

     <li>
      <strong>Define your goal</strong>
    </li>
 </ol>
  // some more HTML context 

最后是最后一个

 <ol start="5">
   <li><strong>Compare</strong></li>
 </ol>

还有我的CSS：

ol {
    list-style: none;
    counter-reset: li;
}

ol li {
    counter-increment: li;
}

ol li:before {
    margin-right: 10px;
    margin-left: -10px;
    content: counter(li);
    background: $pink;
    border-radius: 100%;
    color: white;
    width: 1.5em;
    text-align: center;
    display: inline-block;
}