Hello Developers,
Are you finding a way to create a custom order list?
Here is the simplest way to create a switching custom maker in two different styles.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Webito Brainery</title> <style> li { padding-left: 1ch; } #number li::marker { content: '{' counter(list-item) '}'; color: RGB(242, 15, 45); font-weight: bold; } #alphabet li::marker { content: '{' counter(list-item, upper-alpha) '}'; color: RGB(242, 15, 45); font-weight: bold; } </style> </head> <body> <ol id="number"> <li>HTML</li> <li>CSS</li> <li>BOOTSTRAP</li> <li>JAVASCRIPT</li> <li>JAVA</li> <li>DOT NOT</li> <li>REACT JS</li> </ol> <ol id="alphabet"> <li>HTML</li> <li>CSS</li> <li>BOOTSTRAP</li> <li>JAVASCRIPT</li> <li>JAVA</li> <li>DOT NOT</li> <li>REACT JS</li> </ol> </body> </html> |
Output
That’s it.
Any Suggestions Or any tricks that we missed ????
Comment on it
For more Tips and Tricks, Visit Us at: https://www.instagram.com/webitobrainery/