CSS ::marker Selector

What You’ll Learn

The ::marker pseudo-element targets list bullets and numbers. Style markers without touching the list item text or adding extra HTML.

Introduction

The ::marker pseudo-element in CSS is used to target and style the marker of list items. This includes bullets in unordered lists (<ul>) and numbers or letters in ordered lists (<ol>).

By using ::marker, you can customize list markers beyond their default styling, giving you more control over list design on your web pages.

Definition and Usage

Write li::marker or ul li::marker to style the automatically generated bullet or number. The marker is separate from the list item’s text content.

📝 Syntax

The syntax for the ::marker pseudo-element is:

::marker {
  /* CSS properties */
}

The ::marker pseudo-element applies to <li> elements inside <ul> and <ol> lists, as well as <summary> elements.

Basic Example

ul li::marker {
  color: #b91c1c;
  font-size: 1.15em;
  content: "→ ";
}

Allowed Properties

Syntax Rules

• Use double colon ::marker for pseudo-elements (modern syntax).
• Only a limited set of properties applies to markers.
• content replaces the default bullet or number glyph.
• Works on li in both ul and ol lists.
• For heavy customization, fall back to ::before on li.

Related Selectors

• ::before — alternative for fully custom list bullets
• list-style-type property — changes bullet shape without ::marker
• :first-child / :last-child — style list items by position
• counter() in content — custom numbered markers on ordered lists

When to Use ::marker

::marker is ideal for list presentation tweaks:

• Brand-colored bullets — Match list markers to your site palette.
• Arrow or icon bullets — Replace discs with content: "→ ".
• Styled numbers — Bold or colorize ordered list counters.
• Readable docs — Increase marker size without enlarging list text.
• Quick wins — Simpler than rebuilding lists with ::before.

Examples Gallery

Practice ::marker with unordered lists, ordered lists, color sizing, and comparison with ::before.

<style>
  ul li::marker {
    color: #b91c1c;
    font-size: 1.15em;
    content: "→ ";
  }
</style>

<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>

ol li::marker {
  font-weight: 700;
  color: #2563eb;
  content: "[" counter(list-item) "] ";
}

li::marker {
  color: #16a34a;
  font-size: 1.25em;
}

/* ::marker — limited to text properties */
li::marker {
  color: #2563eb;
}

/* ::before — full styling when marker is not enough */
ul.custom li {
  list-style: none;
  position: relative;
  padding-left: 1.5rem;
}

ul.custom li::before {
  content: "";
  position: absolute;
  left: 0;
  width: 0.5rem;
  height: 0.5rem;
  background: #2563eb;
  border-radius: 50%;
  top: 0.55em;
}

💬 Usage Tips

• Limited properties — Stick to color, font-size, font-family, and content on ::marker.
• content replacement — Use content to swap bullets for arrows, emojis, or symbols.
• Ordered lists — Combine counter(list-item) with custom brackets or prefixes.
• Readability — Increase font-size on markers to make lists easier to scan.
• Heavy customization — Reach for ::before when you need backgrounds or shapes.

⚠️ Common Pitfalls

• Unsupported properties — Background, border, padding, and box-shadow do not work on ::marker.
• Internet Explorer — IE does not support ::marker; provide a ::before fallback.
• list-style: none — Removing list markers disables ::marker; the pseudo-element has nothing to style.
• Overriding content carelessly — Changing content on ol may break expected numbering unless you use counters.
• Accessibility — Keep semantic <ul>/<ol>; decorative markers should not replace list structure.

♿ Accessibility

• Preserve list semantics — Use real <ul> and <ol> elements; screen readers rely on them.
• Do not remove markers silently — If you hide bullets with list-style: none, ensure content is still navigable.
• Color contrast — Marker colors should be distinguishable from the background.
• Meaningful order — On ordered lists, keep logical sequence when customizing numbers.

💡 Best Practices