Führende CSS-Nullen für Dezimalzahlen funktionieren nicht mit großen Zahlen

Question

Kürzlich stieß ich auf ein Problem, bei dem ich eine geordnete Liste mit über hundert Listenelementen erstellt habe. Ich setze list-style:decimal-leading-zero;ol{list-style:decimal-leading-zero;}

Someitem
Someitem
Someitem

P粉576184933 · Answer

没有用于三位小数的list-style。

但是，您可以使用伪选择器和计数器 a> 在这里实现你想要的。

参考代码：

ol {
  counter-reset: items;
}

li {
  display: block;
  counter-increment: items;
}

li:before {
  content: "00" counter(items)". ";
}

li:nth-child(n+10):before {
  content: "0" counter(items)". ";
}

li:nth-child(n+100):before {
  content: counter(items)". ";
}


  Item 1
  Item 2
  Item 3
  Item 4
  Item 5
  Item 6
  Item 7
  Item 8
  Item 9
  Item 10
  Item 11
  Item 12
  Item 13
  Item 14
  Item 15
  Item 16
  Item 17
  Item 18
  Item 19
  Item 20
  Item 21
  Item 22
  Item 23
  Item 24
  Item 25
  Item 26
  Item 27
  Item 28
  Item 29
  Item 30
  Item 31
  Item 32
  Item 33
  Item 34
  Item 35
  Item 36
  Item 37
  Item 38
  Item 39
  Item 40
  Item 41
  Item 42
  Item 43
  Item 44
  Item 45
  Item 46
  Item 47
  Item 48
  Item 49
  Item 50
  Item 51
  Item 52
  Item 53
  Item 54
  Item 55
  Item 56
  Item 57
  Item 58
  Item 59
  Item 60
  Item 61
  Item 62
  Item 63
  Item 64
  Item 65
  Item 66
  Item 67
  Item 68
  Item 69
  Item 70
  Item 71
  Item 72
  Item 73
  Item 74
  Item 75
  Item 76
  Item 77
  Item 78
  Item 79
  Item 80
  Item 81
  Item 82
  Item 83
  Item 84
  Item 85
  Item 86
  Item 87
  Item 88
  Item 89
  Item 90
  Item 91
  Item 92
  Item 93
  Item 94
  Item 95
  Item 96
  Item 97
  Item 98
  Item 99
  Item 100
  Item 101
  Item 102