Good morning, today I show you a brief example of how it would be:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="styles.css"> <title>Numbered List</title> </head> <body> <ul class="numbered-list"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul> </body> </html>
By default, as we already know, this returns bullets. If instead of bullets we want it to return numbers, without being a numbered list, our CSS should be as follows:
body { counter-reset: my-counter 0; // resets the number, starts at 0 } .numbered-list { list-style-type: none; padding: 0; } .numbered-list li::before { counter-increment: my-counter; content: counter(my-counter) ". "; }
- Select the
li
elements inside the list (ul
) with the classnumbered-list
. counter-increment: my-counter;
increments themy-counter
counter by 1 for each list item.content: counter(my-counter) ". ";
adds the content of the counter followed by a period and a space before the actual content of theli
element.
This CSS code is used to number the elements of an unordered list in a customized way using the my-counter
counter.
RESULT:
![](https://i0.wp.com/devcodelight.com/wp-content/uploads/2024/02/image-1.png?resize=160%2C124&ssl=1)
I hope you like it, happy Sunday. :slightly_smiling_face:
![](https://i0.wp.com/devcodelight.com/wp-content/uploads/2023/07/cropped-light_logo-5.png?resize=100%2C100&ssl=1)