Making Lists Pop: Using Custom Bullet Points in CSS

The CSS ::marker pseudo-element selector offers a straightforward way to customize list markers.

Let us learn how:

Understanding the ::marker Selector

The ::marker pseudo-element selector in CSS is used to style the markers of list items.

Traditionally, these markers are simple bullets or numbers, but with modern CSS, you can go beyond these defaults.

By using the ::marker selector, you can change the color, size, and even the content of these markers, including using emojis.

Implementing Custom Markers

To use an emoji as a marker, you first must select the list item marker using the ::marker selector. Then, you can set the content to your desired emoji. For example:

li::marker {
    content: '🌟';
}

This CSS rule will change the li list markers to a star emoji for each item.

Which will look like this:

Adding more options

You can further customize these markers. For instance, changing the size and adding spacing:

li::marker {
    content: '🌟 ';
    font-size: 1.2rem;
}

This rule adds a space after the star emoji and enlarges its size.

Or maybe you want to alter the color/size of your bullet:

li::marker {
  color: pink;
  font-size: 1.2rem;
}

Which results in:

There are other options you can use:

Supported CSS Properties for ::marker Pseudo-Element

The ::marker pseudo-element in CSS is specialized and supports a specific subset of properties. These properties allow for versatile styling of list item markers. Below is an overview of the allowable properties:

Font-Related Properties

• Font Properties: This includes all properties related to the font, such as font-size, font-weight, font-style, etc., enabling customization of the marker's font characteristics.

Text and Color Properties

• White-Space Property: Controls whitespace processing inside the marker.
• Color: Alters the marker's text color, allowing for various color customizations.

Text Direction and Combining

• Text-Combine-Upright: Useful for styling markers in vertical text runs.
• Unicode-Bidi: Manages the embedding and override of bidirectional text.
• Direction: Determines the text direction (left-to-right or right-to-left) of the marker.

Content Property

• Content: Crucial for defining the content of the marker, which can include text or special characters like emojis.

Animation and Transition

• Animation and Transition Properties: These include all properties related to animation and transition, providing dynamic effects to markers during interaction or over time.

Browser Compatibility

It's important to note that the ::marker selector may not be supported in all browsers.

It's widely supported in modern browsers, but always check for the latest compatibility information and consider fallback options for older browsers.

The only obvious thing is that animations may not be supported in all browsers.

You can check out the current support here.

Happy coding! ✌️