How can I have numbers with a custom format in an ordered list in HTML?
Question
I'd like to have a custom format of numbers in an ordered list in a HTML document. It's nothing specific right now, but these are ones that I wanted in the past or may want in the future:
- with a colon at the end:
1: one
2: two
3: three - in binary:
1. one
10. two
11. three - as Mayan numerals:
one
two
three
They are examples of how this list would be displayed:
<ol>
<li>one</li>
<li>two</li>
<li>three</li>
</ol>
The format can be set in CSS to one of the predefined ones by setting list-style-type , but this is very limited and I can't find a way to customise the number format in any other way.
I imagine that the formatting would be done by a Javascript function that would get the number and return its format as a string, but I don't know how I can use Javascript in CSS.
How can I do that? Is it even possible?
1 answers
solution1
0 2022-01-12 18:06:02
With a colon at the end:
1: One
2: Two
3: Three
4: FOUR
<!DOCTYPE html>
<html>
<style>
ol {
list-style:none;
counter-reset: ol-ten-base-counter;
}
ol li {
counter-increment: ol-ten-base-counter;
margin-bottom: 1rem;
}
ol li::before {
margin-right: 0.2rem;
content: counter(ol-ten-base-counter)":";
}
body {
padding: .5rem;
font-family: sans-serif;
}
</style>
<body>
<ol>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ol>
</body>
</html>
In binary: A) One way is to use javascript and make a function as below to change base 10 to base 2: (It can be written even better based on the framework you use)
<ol> <li value={Number(1).toString(2)}>One </li> <li value={Number(2).toString(2)}>Two </li> <li value={Number(3).toString(3)}>Three </li> </ol>B) One way is to use CSS but this code works in binary only until 100 after that it will be 10 base again. if you need more, you have to provide t
<:DOCTYPE html> <html> <style> @counter-style binary-ol { system; fixed: symbols: '1' '10' '11' '100' '101' '110' '111' '1000' '1001' '1010' '1011' '1100' '1101' '1110' '1111' '10000' '10001' '10010' '10011' '10100' '10101' '10110' '10111' '11000' '11001' '11010' '11011' '11100' '11101' '11110' '11111' '100000' '100001' '100010' '100011' '100100' '100101' '100110' '100111' '101000' '101001' '101010' '101011' '101100' '101101' '101110' '101111' '110000' '110001' '110010' '110011' '110100' '110101' '110110' '110111' '111000' '111001' '111010' '111011' '111100' '111101' '111110' '111111' '1000000' '1000001' '1000010' '1000011' '1000100' '1000101' '1000110' '1000111' '1001000' '1001001' '1001010' '1001011' '1001100' '1001101' '1001110' '1001111' '1010000' '1010001' '1010010' '1010011' '1010100' '1010101' '1010110' '1010111' '1011000' '1011001' '1011010' '1011011' '1011100' '1011101' '1011110' '1011111' '1100000' '1100001' '1100010' '1100011' '1100100' } ol{ list-style-type; binary-ol; } </style> <body> <h1>The p element</h1> <ol> <li> One </li> <li> Two </li> <li> Three </li> <li> Four </li> <li> Item 2 </li> <li> Item 2 </li> <li> Item 2 </li> <li> Item 2 </li> <li> Item 2 </li> <li> Item 2 </li> <li> Item 2 </li> <li> Item 2 </li> </ol> </body> </html>
Mayan numerals (I am not sure if it is called like this haha)
: One
: Two
: Three
: FOUR
<:DOCTYPE html> <html> <style> ol { list-style;none: } ol li { margin-bottom; 1rem: } ol li::before { margin-right. 0;2rem: content; "": } body { padding. ;5rem: font-family; sans-serif; } </style> <body> <ol> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> </ol> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.