CssHow-ToBeginner · 3 min read

How to Use ::marker in CSS for Custom List Bullets

Use the ::marker pseudo-element in CSS to style the bullet or number of list items. It targets the marker part of <li> elements, allowing you to change color, font, or content of list markers without affecting the list text.

📐

Syntax

The ::marker pseudo-element targets the bullet or number of a list item (<li>). You write it after the list item selector to style only the marker.

selector::marker: Targets the marker of the list item.
Common CSS properties: color, font-size, content (to change marker symbol).

css

li::marker {
  color: red;
  font-size: 1.2rem;
  content: '→ ';
}

💻

Example

This example shows how to change the color, size, and symbol of list markers using ::marker. The list bullets become blue arrows instead of default dots.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>::marker Example</title>
<style>
ul.custom-list li::marker {
  color: blue;
  font-size: 1.5rem;
  content: '→ ';
}
</style>
</head>
<body>
<ul class="custom-list">
  <li>Learn CSS</li>
  <li>Practice coding</li>
  <li>Build projects</li>
</ul>
</body>
</html>

Output

A bulleted list with three items where each bullet is a large blue arrow pointing right.

⚠️

Common Pitfalls

Many beginners try to style list markers using list-style or by styling the <li> text itself, which does not affect the bullet symbol directly. Also, some CSS properties like background or padding do not work on ::marker. Remember that content can only add simple text or symbols, not HTML.

Incorrect example:

li {
  color: red; /* changes text color, not bullet */
  list-style: none; /* removes bullet entirely */
}

Correct example:

li::marker {
  color: red; /* changes bullet color */
  content: '• ';
}

📊

Quick Reference

Selector: Use li::marker to target list bullets or numbers.
Supported properties: color, font-size, content, font-family, visibility.
Unsupported properties: background, margin, padding.
Browser support: Modern browsers support ::marker well.

✅

Key Takeaways

Use ::marker to style only the bullet or number of list items.

You can change color, size, and symbol of markers but not layout properties like padding.

The content property lets you replace the default bullet with custom symbols.

Styling the <li> text does not affect the bullet marker.

Modern browsers support ::marker for better list styling control.