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.
- Item one
- Item two
- Item three
red marker, black text ::marker { color: red; } | - Item one
- Item two
- 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; } | - Item one
- Item two
- 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: "→ "; } | - Item one
- Item two
- Item three
counter() override ::marker { content: counter(list-item) ") "; } | - Item one
- Item two
- Item three
content: none (suppressed) ::marker { content: none; } | - Item one
- Item two
- 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.
- Item one
- Item two
- Item three
marker: rtl, text: ltr ::marker { direction: rtl; } | - Item one
- Item two
- 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 | - 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 } |
5 — items whose content is block-level
A marker sits beside its item's principal block box whether the item's content is inline or block-level, so <li><p>…</p></li> is numbered exactly like its inline neighbour, and an item mixing the two is numbered once.
A paragraph, so this item's content is block-level. - Ordinary inline content.
Another block-level item.
block-level item content <li><p>…</p></li> | - Leading inline text
followed by a block. A div, also block-level.
mixed inline and block content <li>text<p>…</p></li> |
6 — a marker whose item breaks across a column
A column is a fragmentainer like a page, so the same rule holds: an outside marker goes with the column its item begins in, not the one it happens to finish in. The middle item below runs past the end of the first column; its bullet stays beside its own first line, and it gets no second one where it resumes.
- Column item 1, long enough that the list runs past the end of the first column. word0 word1 word2 word3 word4 word5 word6 word7 word8 word9 word10 word11 word12 word13 word14 word15 word16 word17 word18 word19 word20 word21 word22 word23 word24 word25 word26 word27 word28 word29 word30 word31 word32 word33 word34 word35 word36 word37 word38 word39
- Column item 2, long enough that the list runs past the end of the first column. word0 word1 word2 word3 word4 word5 word6 word7 word8 word9 word10 word11 word12 word13 word14 word15 word16 word17 word18 word19 word20 word21 word22 word23 word24 word25 word26 word27 word28 word29 word30 word31 word32 word33 word34 word35 word36 word37 word38 word39
- Column item 3, long enough that the list runs past the end of the first column. word0 word1 word2 word3 word4 word5 word6 word7 word8 word9 word10 word11 word12 word13 word14 word15 word16 word17 word18 word19 word20 word21 word22 word23 word24 word25 word26 word27 word28 word29 word30 word31 word32 word33 word34 word35 word36 word37 word38 word39
7 — a marker whose item breaks across a page
An outside marker sits beside its item's first line, so it belongs to the page the item starts on even when the item's own text carries on onto the next one. The spacer below pushes the last item across the page boundary; its number must still appear, on the page its first line is on.
- Item 1 of a list long enough to be broken by the page boundary. word0 word1 word2 word3 word4 word5 word6 word7 word8 word9 word10 word11 word12 word13 word14 word15 word16 word17 word18 word19 word20 word21 word22 word23 word24 word25 word26 word27 word28 word29 word30 word31 word32 word33 word34 word35 word36 word37 word38 word39 word40 word41 word42 word43 word44 word45 word46 word47 word48 word49 word50 word51 word52 word53 word54 word55 word56 word57 word58 word59 word60 word61 word62 word63 word64 word65 word66 word67 word68 word69 word70 word71 word72 word73 word74 word75 word76 word77 word78 word79 word80 word81 word82 word83 word84 word85 word86 word87 word88 word89
- Item 2 of a list long enough to be broken by the page boundary. word0 word1 word2 word3 word4 word5 word6 word7 word8 word9 word10 word11 word12 word13 word14 word15 word16 word17 word18 word19 word20 word21 word22 word23 word24 word25 word26 word27 word28 word29 word30 word31 word32 word33 word34 word35 word36 word37 word38 word39 word40 word41 word42 word43 word44 word45 word46 word47 word48 word49 word50 word51 word52 word53 word54 word55 word56 word57 word58 word59 word60 word61 word62 word63 word64 word65 word66 word67 word68 word69 word70 word71 word72 word73 word74 word75 word76 word77 word78 word79 word80 word81 word82 word83 word84 word85 word86 word87 word88 word89
- Item 3 of a list long enough to be broken by the page boundary. word0 word1 word2 word3 word4 word5 word6 word7 word8 word9 word10 word11 word12 word13 word14 word15 word16 word17 word18 word19 word20 word21 word22 word23 word24 word25 word26 word27 word28 word29 word30 word31 word32 word33 word34 word35 word36 word37 word38 word39 word40 word41 word42 word43 word44 word45 word46 word47 word48 word49 word50 word51 word52 word53 word54 word55 word56 word57 word58 word59 word60 word61 word62 word63 word64 word65 word66 word67 word68 word69 word70 word71 word72 word73 word74 word75 word76 word77 word78 word79 word80 word81 word82 word83 word84 word85 word86 word87 word88 word89