CSS ::marker Pseudo-Element

CSS ::marker Pseudo-Element

The ::marker pseudo-element styles the marker box of a list item, including bullets, numbers, and custom symbols. It allows developers to change marker colors, font properties, and content without changing the appearance of the list item's text.

Syntax

selector::marker {
  property: value;
}

The selector identifies a list item or another element that generates a list marker.

The ::marker pseudo-element targets the marker box associated with that element.

For example:

li::marker {
  color: #0066cc;
  font-size: 20px;
}

This rule changes the color and size of list markers.

The text inside each list item retains its normal styling.

The ::marker pseudo-element uses the modern double-colon syntax.

Unlike some older pseudo-elements, ::marker does not have a legacy single-colon form.

How It Works

HTML lists commonly use the <ul>, <ol>, and <li> elements.

Browsers normally generate a marker for each list item.

Unordered lists typically use bullets, while ordered lists typically use numbers.

The ::marker pseudo-element provides a way to style these generated markers independently from the list item text.

For example:

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

With the following CSS:

li::marker {
  color: #cc3300;
}

The bullets become reddish-orange while the list item text remains unchanged.

The pseudo-element can also style markers generated by elements using display: list-item.

It does not create a marker for an element that does not generate a list-item marker box.

Default List Markers

Browsers provide default markers for ordered and unordered lists.

Unordered Lists

An unordered list normally displays bullet markers.

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

Ordered Lists

An ordered list normally displays numbered markers.

<ol>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ol>

The browser generates these markers according to the list type and applicable CSS rules.

The ::marker pseudo-element can change their appearance without changing the list structure.

Changing Marker Colors

The color property changes the color of a list marker.

HTML:

<ul class="colored-markers">
  <li>HTML Elements</li>
  <li>CSS Properties</li>
  <li>JavaScript Functions</li>
</ul>

CSS:

.colored-markers li::marker {
  color: #0066cc;
}

The bullets appear blue while the list item text retains its normal color.

This is useful when list markers should match a website's color scheme.

Changing Marker Fonts

The ::marker pseudo-element supports several font-related properties.

For example:

li::marker {
  color: #0066cc;
  font-size: 24px;
  font-weight: bold;
}

The font-size property changes the marker's size.

The font-weight property changes its weight where the marker glyph supports different weights.

The font-family property can also be used to change the marker's font.

li::marker {
  font-family: Georgia, serif;
  font-size: 22px;
}

Font styling is especially useful for numbered lists and markers created with text characters.

The exact appearance depends on the font and the marker being displayed.

Creating Custom Markers

The content property allows developers to replace a default marker with custom text or symbols.

For example:

li::marker {
  content: "✓ ";
  color: #008060;
}

This rule replaces the default marker with a green checkmark.

HTML:

<ul class="custom-markers">
  <li>Valid HTML</li>
  <li>Organized CSS</li>
  <li>Responsive Layout</li>
</ul>

CSS:

.custom-markers li::marker {
  content: "\2713  ";
  color: #008060;
  font-size: 18px;
  font-weight: bold;
}

Each list item displays a green checkmark instead of the default bullet.

The \2713 escape represents a checkmark character in CSS.

The spaces following the character provide separation between the marker and the list text.

Note: When using custom markers, choose characters supported by the selected font and test their appearance across browsers.

Styling Ordered Lists

The ::marker pseudo-element also works with numbered lists.

For example:

ol li::marker {
  color: #0066cc;
  font-weight: bold;
  font-size: 20px;
}

This rule makes the list numbers blue, bold, and larger than the surrounding text.

HTML:

<ol class="numbered-markers">
  <li>Create the HTML structure.</li>
  <li>Add CSS styling.</li>
  <li>Test the webpage.</li>
</ol>

CSS:

.numbered-markers li::marker {
  color: #0066cc;
  font-size: 20px;
  font-weight: bold;
}

The numbers receive the custom styling while the list item text remains unchanged.

Because the browser still generates the numbers, the list maintains its normal numbering behavior.

Example

The following example uses custom arrow markers to create a styled list of CSS topics.

HTML:

<ul class="arrow-markers">
  <li>CSS Selectors</li>
  <li>CSS Properties</li>
  <li>CSS Pseudo-Elements</li>
</ul>

CSS:

.arrow-markers li {
  padding-left: 5px;
  margin-bottom: 8px;
}
.arrow-markers li::marker {
  content: "\25B6  ";
  color: #0066cc;
  font-size: 14px;
}

Each list item displays a blue triangular arrow instead of a standard bullet.

The \25B6 escape represents a right-pointing triangle.

The padding-left and margin-bottom declarations style the list items rather than the marker boxes.

This approach keeps the HTML list structure intact while customizing the visual markers.

Using the content Property

The content property can replace a list marker with a character, string, or generated counter value.

Custom Text Markers

li::marker {
  content: "Step: ";
}

This rule displays the text "Step:" before each list item.

Custom Symbol Markers

li::marker {
  content: "\2605  ";
}

The \2605 escape represents a filled star character.

Generated Number Markers

The counter() function can preserve automatic numbering while customizing the marker's appearance.

ol li::marker {
  content: counter(list-item) ". ";
  color: #0066cc;
  font-weight: bold;
}

The built-in list-item counter supplies the current list item's number.

The period and space appear after the number.

This approach is useful when customizing ordered list markers without manually entering numbers.

Important: Setting content replaces the marker's normal generated content. For ordered lists, use an appropriate counter when automatic numbering must be preserved.

::marker and list-style

The ::marker pseudo-element and the list-style property both affect list markers, but they serve different purposes.

list-style

The list-style property controls the marker type, position, and image.

ul {
  list-style-type: square;
}

This rule changes unordered list bullets to squares.

::marker

The ::marker pseudo-element styles the generated marker box.

li::marker {
  color: #0066cc;
  font-size: 20px;
}

This rule changes the marker's color and size.

Using Both Together

ul {
  list-style-type: square;
}
li::marker {
  color: #0066cc;
  font-size: 20px;
}

The list uses square bullets styled in blue.

When the content property explicitly replaces a marker, it takes precedence over the normal marker content generated by list-style-type.

Supported CSS Properties

The ::marker pseudo-element supports a restricted collection of CSS properties.

Common supported properties include:

Font-related longhand properties are supported, along with certain other text properties defined by the CSS specification.

General box-model and layout properties such as margin, padding, border, background-color, and display do not apply to ::marker.

For example, the following rule is not a supported way to add padding to a marker:

li::marker {
  padding-right: 10px;
}

To adjust spacing, style the list item or use appropriate spacing within custom marker content.

Limitations

The ::marker pseudo-element has several important limitations.

• It applies only to elements that generate a list marker box.
• It supports a restricted collection of CSS properties.
• It cannot use ordinary padding, margin, border, or background styling.
• It does not provide full control over the marker's position or dimensions.
• Custom symbols depend on font support.
• Replacing marker content can affect automatic numbering.
• Marker appearance may vary slightly between browsers and operating systems.

For example:

li::marker {
  background-color: yellow;
  padding: 10px;
}

These declarations do not provide supported marker background or padding styling.

For more elaborate designs, developers may use ::before with custom list styling, although additional accessibility and layout considerations may apply.

Accessibility Considerations

Custom list markers should preserve the meaning and structure of the list.

Follow these accessibility practices:

• Use semantic HTML list elements such as <ul>, <ol>, and <li>.
• Maintain sufficient contrast between markers and their backgrounds.
• Do not rely on marker color alone to communicate important information.
• Use recognizable symbols when replacing default markers.
• Preserve meaningful numbering in ordered lists.
• Test custom markers with different fonts and screen sizes.
• Do not assume that custom marker content will be announced consistently by screen readers.

The ::marker pseudo-element changes the marker's presentation without requiring additional HTML elements.

For lists where order is important, retain the <ol> element and appropriate numbering behavior.

For lists where order is not important, use <ul>.

When marker symbols communicate essential information, include that meaning in the list item text rather than relying only on the symbol.

Browser Support

The ::marker pseudo-element is widely available in modern browsers, including Chrome, Edge, Firefox, and Safari.

Support for individual properties and custom marker content may vary in older browser versions.

When unsupported styling is ignored, the browser generally continues to display its normal list markers.

For current compatibility information, visit Can I Use? .

Specifications

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

Marker generation and list styling are also described in the CSS Lists and Counters Module Level 3 .

These specifications describe how marker boxes are generated, which properties apply, and how markers interact with list formatting.