CSS ::marker

The ::marker pseudo-element in CSS is a powerful tool that allows you to style list item markers, such as bullets in an unordered list (<ul>) or numbers in an ordered list (<ol>). This feature gives you the flexibility to customize the appearance of list markers without altering the structure of your HTML.

Basic Usage

To use the ::marker pseudo-element, simply define styles for it within a selector that targets a list item (<li>). Here’s an example:


ul {
    list-style: none; /* Remove default bullets */
}

li::marker {
    content: '•'; /* Custom bullet */
    color: red; /* Change bullet color */
    font-size: 20px; /* Increase font size of bullet */
}

Result:

Item One
Item Two
Item Three

Advanced Styling

The ::marker pseudo-element allows you to apply multiple styles. Here's an example demonstrating how to change the marker's color and size:


ol {
    list-style: none; /* Remove default numbering */
}

li::marker {
    content: counter(item) '. '; /* Custom counter */
    counter-increment: item; /* Increment counter */
    color: blue; /* Change numbering color */
    font-weight: bold; /* Make numbering bold */
}

Result:

First Item
Second Item
Third Item

Using Images as Markers

You can also use images for your markers. The ::marker pseudo-element can be combined with CSS to display image markers:


ul {
    list-style: none; /* Remove default bullets */
}

li::marker {
    content: url('path/to/image.png'); /* Use an image as a bullet */
    width: 20px; 
    height: 20px; 
    display: inline-block; /* Ensure the image is displayed inline */
}

Result:

Bullet with Image One
Bullet with Image Two
Bullet with Image Three

Browser Support

The ::marker pseudo-element is widely supported in modern browsers. However, you should always check compatibility if you're working with older versions.

In summary, the ::marker pseudo-element allows for creative and flexible styling of list item markers. Experiment and combine different styles to achieve the desired look for your lists!