Welcome to Part 24 of the CSS Mastery & Responsive Layouts Course. In this part, we will explore List Styling, Markers, & Counters.

HTML lists (<ul>, <ol>) are fundamental structures for grouping text elements. CSS allows you to customize the bullet styles, adjust spacing positions, style markers with custom symbols, and implement dynamic CSS Counters to automatically number paragraphs and nested lists (like legal documents or technical manuals) without using JavaScript.

---

Chapter 137: List Spacings & Bullets

I. List Bullet Types (list-style-type)

Configures the bullet icon or numbering system:

• disc (Default for ul), circle, square.
• decimal (Default for ol), lower-roman, upper-roman, lower-alpha.
• none: Hides the bullet indicator.
• Custom String: Set custom markers directly (e.g. list-style-type: "✓ ";).

.checklist {
  list-style-type: "✔ "; /* Replaces default discs with checkmarks */
}

II. Bullet Position (list-style-position)

Determines where bullet markers sit relative to list items:

• outside (Default): Bullets sit in the margin. If text wraps, it aligns in a clean column.
• inside: Bullets sit inside the text block. Wrapping text wraps underneath the bullet icon.

---

Chapter 138: Custom Markers (::marker)

The modern pseudo-element ::marker allows you to style the list item’s bullet/number directly:

/* Colorizes and increases the font weight of bullet markers */
.fancy-list li::marker {
  color: #ef4444;
  font-weight: bold;
  font-size: 1.25rem;
}

• Property Limits: ::marker only supports a subset of CSS properties (like color, font-family, font-size, content, and transitions).

---

Chapter 139: CSS Counters & Nesting

CSS Counters are variables managed by the browser. They are incremented dynamically as styles apply to DOM elements.

III. Basic Counter Operations

• counter-reset: Initializes or resets a counter variable.
• counter-increment: Increases a counter variable value.
• counter(): Displays a counter value as text inside a pseudo-element.

/* 1. Reset counter on parent container */
.step-list {
  counter-reset: section;
}

/* 2. Increment and display counter on child elements */
.step-list li {
  list-style: none; /* Hide default bullets */
}
.step-list li::before {
  counter-increment: section;
  content: "Step " counter(section) ": "; /* Renders Step 1, Step 2, etc. */
  font-weight: bold;
}

IV. Nested Counters (counters())

For nested lists (like 1.1, 1.1.1), use the counters() function, specifying the counter variable and a separator string:

ol {
  counter-reset: outline;
  list-style-type: none;
}
li::before {
  counter-increment: outline;
  content: counters(outline, ".") " "; /* Renders 1, 1.1, 1.1.1, etc. */
}

---

Chapter 140: Lists Practice & Self-Check

I. Practice Exercises

1. Exercise 1: Dynamic legal outline: Create a numbered outline with custom separators.

   .legal-doc {
     counter-reset: law-section;
   }
   .legal-doc h2::before {
     counter-increment: law-section;
     content: "Section " counter(law-section) " § ";
     color: gold;
   }

II. Self-Check Questions

1. What property controls the bullet type or icon for lists?
   • Answer: list-style-type.
2. What is the difference between list-style-position: inside and outside?
   • Answer: outside aligns wrapping text columns cleanly; inside wraps text underneath list bullet markers.
3. What pseudo-element allows styling list bullet elements directly?
   • Answer: ::marker.
4. What property initializes or resets a CSS counter?
   • Answer: counter-reset.
5. What function displays nested counter variables (e.g. 1.2.1)?
   • Answer: counters().
6. Can you style ::marker with margins and paddings?
   • Answer: No, margins and paddings are not supported on ::marker elements.
7. What is the default value of list-style-position?
   • Answer: outside.
8. Can CSS counters be used on non-list elements (like h1, h2 headers)?
   • Answer: Yes, counters can increment and display on any DOM element nodes.
9. What is the default value of list-style-type for ordered lists (
   )?
   • Answer: decimal.
   1. How do you hide default bullet lists markers?
      • Answer: Set list-style-type: none or list-style: none.