Custom list markers

Sprint retro action items: bullets pick up the accent color and extra weight without swapping to fake characters.

Carry-over from retro

Document the on-call handoff checklist in Notion.
Add flake detection to the nightly E2E job before Friday.
Pair with design on empty states for the billing flow.

Widely Supported

typography::markerno-js

Quick implementation

.task-list ul { padding-left: 1.15rem; }
.task-list li::marker {
  color: var(--accent);
  font-weight: 800;
  font-size: 1.1em;
}

Prompt this to your LLM

Checklists and release notes.

You are styling a semantic ul list with stronger bullets.

Goal: Use ::marker to recolor and embolden bullets; keep real list elements.

Constraints:
- Do not replace ul with divs and manual bullets.
- Marker uses accent color; list text uses normal body color.

Return CSS for .task-list.

Why this matters in 2026

::marker finally gives designers control while preserving list announcements in assistive tech.

The logic

Markers are pseudo-elements tied to list items; limited property set keeps performance predictable.

Accessibility & performance

Avoid list-style: none without role fixes if you need list semantics announced.