CSS ::-moz-list-bullet Pseudo-Element

CSS ::-moz-list-bullet Pseudo-Element

The ::-moz-list-bullet pseudo-element is a non-standard Mozilla CSS extension that targets the bullet marker of an unordered list item in Firefox. It allows the bullet to be styled separately from the list item's text.

Syntax

li::-moz-list-bullet {
  color: #0066cc;
}

The selector targets the bullet associated with a list item. CSS declarations can change supported visual properties of the marker without changing the list item's text.

The -moz- prefix identifies this as a Mozilla-specific extension rather than a standardized CSS selector.

How It Works

HTML unordered lists normally display a bullet before each list item. The browser generates this marker automatically according to the list's styling.

In Firefox, ::-moz-list-bullet provides a way to select the generated bullet independently of the list item content.

For example, a developer can change the bullet's color while leaving the text unchanged. The size of the marker can also be influenced through supported font properties.

This pseudo-element applies to bullet markers, not the numbering used by ordered lists. Firefox also provides ::-moz-list-number for numbered markers.

Styling List Bullets

One use of ::-moz-list-bullet is to make unordered list markers more noticeable without changing the surrounding text.

ul.custom-list li::-moz-list-bullet {
  color: #cc3300;
  font-size: 1.4em;
}

The color property changes the bullet color, while font-size increases the marker's size. The list item text retains its normal styling unless other CSS rules affect it.

Because this selector is specific to Firefox, it should not be the only method used when consistent list styling is required across browsers.

Example

The following example uses a custom class to style the bullets of an unordered list in Firefox.

HTML:

<ul class="custom-list">
  <li>HTML Elements</li>
  <li>CSS Selectors</li>
  <li>CSS Properties</li>
</ul>

CSS:

.custom-list li {
  color: #333;
}
.custom-list li::-moz-list-bullet {
  color: #0066cc;
  font-size: 1.5em;
}

In Firefox, the bullet markers appear blue and larger than their default size, while the list item text remains dark gray. Other browsers may ignore the Mozilla-specific selector.

Standard Alternative

The standardized ::marker pseudo-element provides a cross-browser method for styling list markers. It works with both unordered and ordered lists.

.custom-list li::marker {
  color: #0066cc;
  font-size: 1.5em;
}

Unlike ::-moz-list-bullet, ::marker is not limited to Firefox. It is the recommended choice for modern websites.

The ::marker pseudo-element supports a defined set of CSS properties, including color, certain font properties, and content. It does not support every property that can be applied to an ordinary element.

Browser Support

::-moz-list-bullet is a non-standard Firefox-specific pseudo-element. It is supported in Firefox but is not supported in Chrome, Edge, Safari, or other non-Firefox browser engines.

For modern cross-browser list marker styling, use the standardized ::marker pseudo-element instead.

For current compatibility information, visit Can I Use? and search for CSS marker pseudo-element support.

Specifications

::-moz-list-bullet is a proprietary Mozilla extension and is not defined in a W3C CSS specification.

The standardized ::marker pseudo-element is defined in CSS Pseudo-Elements Module Level 4 .