CSS ::marker Test Page

1 — color and font styling

::marker is a real, independently styled box now - its color/font are its own, not the list item's.

  1. Item one
  2. Item two
  3. Item three
red marker, black text
::marker { color: red; }
  1. Item one
  2. Item two
  3. Item three
large bold marker
::marker { font-size: 13pt; font-weight: bold; }
  • Item one
  • Item two
  • Item three
marker color vs. text color
::marker { color: green; }
  1. Item one
  2. Item two
  3. Item three
both color and font-size
::marker { color: #8e44ad; font-size: 13pt; }

2 — content overrides

An explicit content value fully replaces the automatic bullet/number - no automatic "." suffix, so any spacing/punctuation must be in the string itself.

  • Item one
  • Item two
  • Item three
custom string
::marker { content: "→ "; }
  1. Item one
  2. Item two
  3. Item three
counter() override
::marker { content: counter(list-item) ") "; }
  • Item one
  • Item two
  • Item three
content: none (suppressed)
::marker { content: none; }
  1. Item one
  2. Item two
  3. Item three
content: normal (baseline)
::marker { content: normal; }

3 — direction

The marker's own direction is independent of the list item's own text direction.

  1. Item one
  2. Item two
  3. Item three
marker: rtl, text: ltr
::marker { direction: rtl; }
  1. Item one
  2. Item two
  3. Item three
marker: ltr (baseline)
::marker { direction: ltr; }

4 — list-style-position: inside vs outside

An "inside" marker is a real first inline child of the list item's own content, flowing (and wrapping) like ordinary text; an "outside" marker (the default) hangs to the left, never affecting the item's own line-wrap.

  • Outside position (default): this list item has enough text in it to wrap onto a second line, so the effect on the hanging indent is visible.
outside (default)
list-style-position: outside
  • Inside position: this list item has enough text in it to wrap onto a second line, so the marker's effect on where the wrapped line starts is visible.
inside
list-style-position: inside
  1. Inside position with a much larger marker font-size: this item's text also wraps, showing the reserved width grow with it.
inside + large marker font-size
list-style-position: inside; ::marker { font-size: 20pt }