Codectionary / Developer documentation / CSS

Styling List Markers with ::marker

::marker targets the marker box of a list item, such as its bullet or counter.

What it is and why to use it

::marker targets the marker box of a list item, such as its bullet or counter. It lets a list keep native numbering and semantics while changing selected marker properties. This is useful for a checklist or outline whose bullets should match a visual theme.

Common mistakes and limitations

Only a subset of CSS properties apply to ::marker; do not expect normal box layout properties such as padding to work on it. Replacing marker content can also change what users perceive, so preserve the intended numbering and test assistive technology.

Try the example

The example pairs editable CSS with its own HTML preview. Run it, then change one declaration at a time and compare the result. Locally, put the CSS in a style element in the document head or in an external stylesheet linked from the HTML. Feature support varies by browser and version; use the linked reference and a useful fallback where needed.

HTML used by this example

<ol class="topics"><li>Read the guide</li><li>Run the example</li><li>Explain the result</li></ol>

Syntax

li::marker { color: #2563eb; }

Examples

Styling List Markers with ::marker

Run the CSS against the supplied HTML, then experiment with the values.

.topics li { margin-block: .5rem; }
.topics li::marker { color: #2563eb; font-weight: bold; }
  1. The ordered list supplies its own numbers.
  2. ::marker changes their colour and weight without replacing the list structure.
  3. The content remains a numbered sequence when author styling is unavailable. This is useful for editorial learning steps.
HTML used by this example
<div class="demo"><ol class="topics"><li>Read the guide</li><li>Run the example</li><li>Explain the result</li></ol></div>

Best practices

  • Only a subset of CSS properties apply to ::marker; do not expect normal box layout properties such as padding to work on it. Replacing marker content can also change what users perceive, so preserve the intended numbering and test assistive technology.
  • Inspect the relevant browser reference and test the browsers used by your audience.

Runtime & versions

Web browsers. Feature availability depends on the language and runtime version used by your project; consult the official reference below.

CSS specifications (modules)

Specifications & further reading