Exploring CSS ::marker Pseudo-Element

The ::marker pseudo-element is a feature in CSS that 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.

Basic Usage

The basic syntax for using ::marker is as follows:

ul li::marker {
/* Your styling properties here */
}

ol li::marker {
/* Your styling properties here */
}

Example 1: Customizing Bullets in an Unordered List

Let’s say you want to change the look  of bullets in an unordered list. Here’s how you can achieve that.

<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’s how it looks:

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

Example 2: Styling Numbers in an Ordered List

Suppose you want to make the numbers in an ordered list appear as bold and red:

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

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

Here’s the result:

See the Pen
Untitled 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 employed 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.

Additionally, a hover effect is implemented to visually enhance the markers by scaling them when the user hovers over a task. This example aims to showcase a more interactive and visually engaging approach to styling list items with a focus on the dynamic manipulation of the markers using both CSS and JavaScript.

HTML:

<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:

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: '•'; /* Bullet character */
    display: inline-block;
    width: 0.7em;
    font-size: 1.5em;
    color: #ddd;
    transition: transform 0.3s, color 0.3s;
}

li.completed::before {
    color: #4CAF50; /* Green color for completed tasks */
}

li.in-progress::before {
    color: #FFC107; /* Yellow color for in-progress tasks */
}

li span {
    flex-grow: 1;
}

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

JavaScript:

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:

See the Pen
Untitled by Roee Yossef (@roeey)
on CodePen.

Feel free to experiment with various properties such as font-family, background-color, and more to achieve the desired look for your list item markers.

The ::marker pseudo-element provides a convenient way to enhance the styling of lists and make them more visually appealing.