Definition and Usage

The ::marker pseudo-element selector selects the list markers automatically generated for elements whose display property is set to list-item, such as <li> and <summary> elements.
A list marker is a pseudo-element that displays bullets, numbers, and similar symbols.

The ::marker pseudo-element selector provides a versatile way to style list markers.

Basic Example

HTML 
<style>
    li::marker {
        color: red; /* Marker color */
        font-size: 0.8em; /* Marker size */
    }
</style>
<ul>
    <li>Pizza</li>
    <li>Burgers</li>
    <li>Tacos</li>
</ul>
Rendered Output

List Markers

List markers—also called marker boxes—refer to bullets, numbers, and similar symbols automatically generated before list items.

Automatically Generated List Markers Before List Items

Here, an important point to note is that the <summary> element also has a list marker.
The list marker generated for the <summary> element is displayed as a triangle (►). The <summary> element has a display value of list-item.

A list marker is automatically generated for any element with a display value of list-item. These automatically generated markers can be styled in various ways using the ::marker pseudo-element selector.

<summary> List Marker Browser Compatibility Note: Safari

Desktop Safari and mobile Safari do not support a display value of list-item for the <summary> element.

Therefore, the ::marker pseudo-element selector cannot be used on the <summary> element in desktop Safari and mobile Safari.

However, there is a separate selector available in desktop Safari and mobile Safari to style the list marker of the <summary> element.

The ::-webkit-details-marker pseudo-element selector is a non-standard selector, but it can be used to control list markers in desktop Safari and mobile Safari.

In desktop Safari and mobile Safari, use the ::-webkit-details-marker pseudo-element selector on the <summary> element!
Reference: CSS <details> Tag Styling – Examples, Techniques

Styling List Markers

The following is a demo showcasing how to style list markers using the ::marker pseudo-element selector.

Marker Styling - Part 1

HTML 
<style>
    li::marker {
        content: "- "; /* Marker content */
    }
</style>
<ul>
    <li>Pizza</li>
    <li>Burgers</li>
    <li>Tacos</li>
</ul>
Rendered Output

You can change the marker content by using the content property with the ::marker pseudo-element selector. The content property is used to specify the content of a pseudo-element created by the corresponding CSS pseudo-element selectors, such as ::before, ::after, and ::marker.

Marker Styling - Part 2

HTML 
<style>
    li::marker {
        content: "😃 ";
        font-size: 0.8em;
    }
</style>
<ul>
    <li>Pizza</li>
    <li>Burgers</li>
    <li>Tacos</li>
</ul>
Add Emojis to Your Web Pages
Rendered Output

Limited Supported Properties

The CSS properties that can be applied using the ::marker pseudo-element selector are limited. The following is a list of properties that are reliably supported across all major browsers.

While these properties have universal support, other properties may not guarantee full browser compatibility.

For example, properties such as animation and transition are supported in most modern browsers but are not supported in Safari.

Safari support is limited to color and font-size.

The specification states that additional CSS properties may be supported in the future.

Pro Tips for Styling List Markers!

Here are some useful tips and information for custom styling of list markers.
Please refer to the following links!

Browser Compatibility

Browser Compatibility for the ::marker Pseudo-Element
Selector
Desktop Chrome
Chrome
Desktop Edge
Edge
Desktop Firefox
Firefox
Safari
Safari
::marker 86 86 68 11.1

Specifications

Specification Details for the ::marker Pseudo-Element
Specification
::marker CSS Pseudo-Elements Module Level 4
#marker-pseudo

References

See Also