着色列表项目超过10+

Question

使用此方法为有序列表项的颜色着色时：

  ol {
    padding-left:0;
    >li {
      list-style-type: none;
      counter-increment: list;
      position: relative;
      padding-left: 30px;
      &:before {
        content: counter(list) ".";
        position: absolute;
        left: 5px;
      }
    }
  }

当达到两位数时，如果数字太接近文字，则会出现此问题：http://d.pr/i/IDh8r7 无论如何做到这样它不会发生，而不只是添加更多的填充？

Answer 1

你可以这样做，而不是从右边对齐

<ol>
  <li>Some text</li>
  <li>Some text</li>
  <li>Some text</li>
  <li>Some text</li>
  <li>Some text</li>
  <li>Some text</li>
  <li>Some text</li>
  <li>Some text</li>
  <li>Some text</li>
  <li>Some text</li>
</ol>

function findNextSquare(sq) {
  var rt = Math.sqrt(sq);
  return rt % 1 !== 0 ? -1 : (rt + 1)**2; 
}

Answer 2

数字上有些clearTimeout怎么样？我知道这不一定是你要求的，但它在视觉上更令人愉悦。