CSS ::marker Selector

Posted in CSS Tutorial

Updated on Oct 07, 2024

By Mari Selvan

👁️ 22 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The ::marker pseudo-element in CSS is used to target and style the marker of list items. This includes the bullets in unordered lists (<ul>) or the numbers/letters in ordered lists (<ol>).

By using the ::marker selector, you can customize the appearance of list markers beyond their default styling, giving you more control over list design in your web pages.

💡 Syntax

The signature of the ::marker Selector is as follows:

Syntax

Copied

::marker {
    /* CSS properties */
}

The ::marker pseudo-element can only be applied to list items (<li>), as these are the elements that contain markers.

📝 Example

Here’s an example demonstrating the usage of the ::marker selector:

☠️ HTML

HTML

Copied

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS ::marker Selector Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <ul>
        <li>First item</li>
        <li>Second item</li>
        <li>Third item</li>
    </ul>
</body>
</html>

🎨 CSS

CSS

Copied

/* Style for the list markers */
ul li::marker {
    color: red;
    font-size: 20px;
    content: "→"; /* Replaces the default bullet with an arrow */
}

In this example:

The list markers (bullets) are changed to red with a larger font size.
The default bullet is replaced with a right arrow (→), giving a customized look to the list.

💬 Usage Tips

The ::marker pseudo-element can only change specific properties like color, font-size, and content. You cannot apply other styles, such as background color or box-shadow, to the marker.
Use ::marker to enhance the readability or aesthetic of lists in documents and websites. It's particularly useful when you want to match the design theme of your webpage.
You can change the marker style for ordered lists (<ol>) as well, customizing how numbers or letters appear.

Example for Ordered Lists

CSS

Copied

ol li::marker {
    font-weight: bold;
    color: blue;
    content: "[" counter(list-item) "]"; /* Custom format for numbered items */
}

This will display the numbers in a bold, blue format with square brackets around them.

⚠️ Common Pitfalls

The ::marker selector is supported in most modern browsers, but older versions of Internet Explorer do not support this pseudo-element. Ensure you check browser compatibility for wider support.
Keep in mind that the ::marker pseudo-element is quite limited in the range of styles it supports. If you need more customization, consider using inline content or pseudo-elements like ::before and ::after on the <li> element.

🎉 Conclusion

The ::marker selector allows for greater control over the appearance of list markers, helping you align your list styles with the overall design of your webpage. While it has its limitations in terms of styling options, it provides a simple and effective way to make lists visually distinct.

By using ::marker, you can customize lists without affecting the content, creating a cleaner and more appealing presentation.