Counter and list styles

Counters and List Styling

CSS3's counter functionality provides more flexible control over list item numbering. Combined with the ::marker pseudo-element and list-style property, it enables the creation of complex numbering systems that traditional HTML lists cannot achieve.

Basic Counter Usage

Initialize counters with counter-reset, increment values with counter-increment, and display counts with the content property:

ol {
  counter-reset: section;
  list-style: none;
}
li::before {
  counter-increment: section;
  content: counters(section, ".") " ";
}

This example generates multi-level numbering like "1.1", "1.2". The counters() function automatically handles nesting relationships, with the second parameter specifying the connector.

Expanded List Style Types

CSS3 adds several new list marker styles:

ul {
  list-style-type: square; /* Traditional style */
}

ul.modern {
  list-style-type: "→ "; /* Custom character */
  padding-left: 1.2em;
  text-indent: -1.2em;
}

Also supports these predefined values:

• disclosure-open/disclosure-closed for collapsible lists
• hebrew Hebrew numbering
• cjk-ideographic Chinese counting

Multi-column List Layouts

Combine with CSS multi-column properties to create magazine-style lists:

.multicol-list {
  column-count: 3;
  column-gap: 2em;
}
li {
  break-inside: avoid;
  page-break-inside: avoid;
}

Custom Marker Content

Fully customize counting systems with @counter-style rules:

@counter-style circled-alpha {
  system: alphabetic;
  symbols: Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ;
  suffix: " ";
}

ul.custom {
  list-style: circled-alpha;
}

Animated Counters

Achieve dynamic counting effects with CSS animations:

@keyframes count-up {
  from { --num: 0 }
  to { --num: 100 }
}

.counter {
  animation: count-up 3s ease-out forwards;
  counter-reset: num var(--num);
}
.counter::after {
  content: counter(num);
}

Requires JavaScript for variable handling:

document.documentElement.style.setProperty('--num', targetValue);

Multilingual Lists

Set appropriate numbering systems for different languages:

:lang(zh) ol {
  list-style-type: cjk-decimal;
}
:lang(he) ol {
  list-style-type: hebrew;
}
:lang(ja) ol {
  list-style-type: japanese-formal;
}

Complex Nesting Example

Create multi-level numbering for legal documents:

.doc {
  counter-reset: chapter section subsection;
}
.chapter {
  counter-increment: chapter;
  counter-reset: section;
}
.chapter h2::before {
  content: "Chapter " counter(chapter, cjk-decimal) " ";
}
.section {
  counter-increment: section;
  counter-reset: subsection;
}
.section h3::before {
  content: counter(chapter) "." counter(section) " ";
}

List Style Position Control

Advanced usage of list-style-position:

ul.indent-markers {
  list-style-position: inside;
  padding-left: 0;
  li {
    text-indent: -1em;
    padding-left: 1.5em;
  }
}

Responsive List Design

Switch list styles based on viewport size:

@media (max-width: 600px) {
  .responsive-list {
    list-style-type: none;
    li {
      display: flex;
      &::before {
        content: "•";
        color: var(--accent);
        padding-right: 0.5em;
      }
    }
  }
}

Counters with Tables

Add automatic numbering before table rows:

table {
  counter-reset: row;
}
tr {
  counter-increment: row;
}
td:first-child::before {
  content: counter(row);
  display: inline-block;
  width: 2em;
}

Print-optimized Lists

Ensure list markers remain visible during page breaks:

@media print {
  ul, ol {
    list-style-position: inside;
  }
  li {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}

Counter Reset Modes

Understanding counter scope:

.container {
  counter-reset: item 5; /* Start counting from 5 */
}
.new-section {
  counter-reset: item 0; /* Reset to 0 */
}

Creative List Markers

Using CSS gradients and shapes:

ul.gradient-markers li::marker {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  background: linear-gradient(45deg, #ff8a00, #e52e71);
  border-radius: 50%;
  margin-right: 8px;
}