CSS - Pseudo-element - ::marker

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