CSS - Pseudo-element - ::marker

Quiz

The ::marker pseudo-element in CSS is used to style the marker of a list element, that contains a number or bullet. Any element that is set to display: list-item, like <li> or <summary> elements.

Only a small list of CSS properties can be used with ::marker pseudo- element, which listed below:

All font related properties
white-space
Color property
text-combine-upright
unicode-bidi
direction
content
All animation and transition properties

Syntax

selector::marker {
   /* ... */
}

CSS ::marker Example

Here is an example of ::marker pseudo-element:

<html> 
<head>
<style>
    ol li::marker {
        color: rgb(11, 38, 241);
        font-weight: bold;
    }

    ul li::marker {
        content: url('images/smiley.png')
    }

    body {
        line-height: 1.4;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
    }
</style>
</head>
<body>
    <h2>Numbered list</h2>
    <ol>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
    </ol>
    
    <h2>Bulleted list</h2>
    <ul>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
    </ul>
</body>
</html>

Print Page