How can you customize the numbers in an ordered list?

Advanced customizations: Owning the counters in CSS

CSS counters are your weapon to challenge conventional numbered lists.

Multi-level lists that impress

Create multi-tiered lists, like document outlines:

ol {
  counter-reset: chapter-counter; /* Plot twist: a new counter reset */
}
li::before {
  counter-increment: chapter-counter;
  content: counter(chapter-counter) "." /* Leveling up with counters */
           counters(section-counter, "."); /* Nested? No problem! */
}
li {
  counter-reset: section-counter; /* Fresh start at every counter reset */
}


Mastering number alignment for clean layout

Tweak padding or margin, ensuring your numbers are symmetrically aligned for a spotless layout:

ol {
  list-style-type: none;
  padding-left: 0;
}
ol li::before {
  margin-right: 10px; /* The right space at the right place! */
  content: counter(item) "."; /* Periods bringing elegance */
}
li {
  margin-left: 20px; /* Complimenting the alignment */
  display: block; /* Block display, not a big deal! */
}


Counters showcasing prefixes and suffixes

Explore the power of CSS content property to add suffixes or prefixes to turn numbers into stylish elements:

ol li::before {
  content: counter(item) "→ "; /* Arrows directing the flow */
}


Custom starting point for lists

HTML5 start attribute resets the starting point of list numeration:

<ol start="10">
  <li>Magic begins at ten</li>
  <li>Welcome to the second floor</li>
</ol>


Utilizing HTML5 value attributes

For precision control over list item numbers, value attribute is there:

<ol>
  <li value="100">Centennial celebration</li>
  <li>Following hundred</li>
</ol>


Cross-browser compatibility

Ensure cross-browser compatibility. Remember, the behavior of CSS counters might slightly vary among different browsers.