CSS Counter: Creating Elegantly Numbered Lists

by
Tiempo de lectura: < 1 minuto

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 class numbered-list.
  • counter-increment: my-counter; increments the my-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 the li element.

This CSS code is used to number the elements of an unordered list in a customized way using the my-counter counter.

RESULT:

I hope you like it, happy Sunday. :slightly_smiling_face:

Post Views: 8

Leave a Comment