CSS leading zeros for decimals not working with large numbers-PHP Chinese Network Q&A

Article Topic Learning Download Q&A Programming Dictionary Game Recent Updates

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

CSS leading zeros for decimals not working with large numbers

P粉018548441 2023-11-07 10:35:53

605

I recently encountered a problem where I created an ordered list containing over a hundred list items. I setlist-style:decimal-leading-zero;

ol{ list-style: decimal-leading-zero; }

Some item
Some item
Some item
Some item
Some item
Some item
Some item
Some item
Some item
Some item
Some item
Some item

...

Some item
Some item
Some item
Some item
Some item
Some item
Some item
Some item
Some item
Some item
Some item
Some item

Problem:Only the first nine list items have leading zeros.

Expected:Two leading zeros in the first nine list items, and one leading zero in the 10th to 99th list items.

P粉018548441

reply all (1)

P粉5761849332023-11-08 00:40:33 1 floor

There is nolist-stylefor three decimal places.

However, you can use pseudo-selectors andcounters a> to achieve what you want here.

Reference Code:

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