jquery - 为 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 {
  padding-left: 0;
}

ol>li {
  list-style-type: none;
  counter-increment: list;
  position: relative;
  padding-left: 30px;
}

ol>li:before {
  content: counter(list) ".";
  position: absolute;
  /* right: calc(100% - 25px);              this is the same as "left: 5px"  */
  right: calc(100% - 20px);             /*  this will probably look better   */
}

<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>