Exploring the CSS ::marker Pseudo-Element

The ::marker pseudo-element in CSS enables you to style the markers of list items. Whether you want to customize the appearance of bullets in an unordered list or the numbering in an ordered list, ::marker gives you the flexibility to enhance the visual appeal of your lists without extra HTML or JavaScript.

This post covers the basics of ::marker, the CSS properties it supports, and practical examples you can use right away.

Basic Usage

The basic syntax for using ::marker is straightforward. Apply it to list items in either unordered or ordered lists:

ul li::marker {
  /* Styling for unordered list markers */
}

ol li::marker {
  /* Styling for ordered list markers */
}

Example 1: Customizing Bullets in an Unordered List

You can change the look of bullets in an unordered list by setting the content property on the marker:

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

ul {
  list-style: none;
  font-size: 1.2rem;
  font-family: 'Noto Sans Hebrew', sans-serif;
}

li {
  padding-left: 7px;
}

li::marker {
  content: "🔹";
  color: blue;
}

In this example, the marker content is set to a blue diamond emoji using the content property, and the color is set to blue. This creates a custom marker for each list item.

Here is how it looks:

See the Pen
The Use of ::marker pseudo element by Roee Yossef (@roeey)
on CodePen.

Example 2: Styling Numbers in an Ordered List

If you want the numbers in an ordered list to appear bold and red, you only need two properties:

<ol>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ol>

li::marker {
    font-weight: bold;
    color: red;
}

Here is the result:

See the Pen
Ordered list marker styling by Roee Yossef (@roeey)
on CodePen.

Example 3: Advanced ::marker Example

In this advanced example, a dynamic task list is created with custom markers to represent the progress status of each task.

The list items, styled using the li selector, are displayed as flex containers to align the marker and task text. The ::before pseudo-element is used to generate a custom bullet point for each list item.

The markers are initially styled with a neutral color and size, and their appearance dynamically changes based on the completion status of the corresponding task. JavaScript is integrated to toggle the completion status when a task item is clicked.

A hover effect is also implemented to visually enhance the markers by scaling them when the user hovers over a task.

HTML

The markup defines a simple unordered list with status classes:

<ul>
    <li class="completed"><span>Task 1: Completed</span></li>
    <li class="in-progress"><span>Task 2: In Progress</span></li>
    <li><span>Task 3: Incomplete</span></li>
</ul>

CSS

The styles use ::before to create colored bullet markers that change based on the task status:

ul {
    list-style: none;
    padding: 0;
    font-family: 'Noto Sans Hebrew', sans-serif;
    font-size: 1.2rem;
}

li {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

li::before {
    content: '•';
    display: inline-block;
    width: 0.7em;
    font-size: 1.5em;
    color: #ddd;
    transition: transform 0.3s, color 0.3s;
}

li.completed::before {
    color: #4CAF50;
}

li.in-progress::before {
    color: #FFC107;
}

li span {
    flex-grow: 1;
}

li:hover::before {
    transform: scale(1.2);
}

JavaScript

A click handler toggles the task status between completed and in-progress:

document.addEventListener('DOMContentLoaded', function() {
    const taskItems = document.querySelectorAll('li');

    taskItems.forEach(function(item) {
        item.addEventListener('click', function() {
            this.classList.toggle('completed');
            this.classList.toggle('in-progress');
        });
    });
});

The Result

Here is the interactive demo:

See the Pen
Advanced marker task list by Roee Yossef (@roeey)
on CodePen.

When ::marker does not support the styling you need (such as backgrounds, transforms, or layout properties), using ::before with list-style: none is a common workaround – as demonstrated in this advanced example.

The ::marker pseudo-element is not the only way to customize list appearance. If you are interested in styling other text elements, take a look at the ::first-letter pseudo-element for styling the first letter of paragraphs. For more advanced selector techniques, check out the post on CSS4 selectors.

FAQs

Common questions about the CSS ::marker pseudo-element:

Summary

The ::marker pseudo-element provides a simple, CSS-only way to style list markers. For basic changes like color, font size, and custom content, it works well with minimal code. When you need more advanced styling like backgrounds, transforms, or layout control, combine ::before with list-style: none as a workaround.