::marker CSS Pseudo Element


The CSS ::marker pseudo-element selects the marker of a list item. This marker is typically a bullet point or a number, but it can also be an image or other custom content. The ::marker pseudo-element allows you to style the marker independently of the rest of the list item, giving you more control over the appearance of your lists.

To use the ::marker pseudo-element, simply add it to the end of the CSS selector for your list item. For example, to style the bullet points in an unordered list, you would use the following selector:

ul li::marker {
/* CSS styles for the bullet points */

To style the numbers in an ordered list, you would use the following selector:
ol li::marker {
/* CSS styles for the numbers */

You can use the ::marker pseudo-element to style any aspect of the marker, including its size, color, font, and background. You can also use it to add custom content to the marker, such as an image or a checkmark.

Here are some examples of how to use the ::marker pseudo-element:

Change the color of the bullet points in an unordered list to red:
ul li::marker {
color: red;

Increase the size of the numbers in an ordered list:
ol li::marker {
font-size: 1.5em;

Add a checkmark to the bullet points in an unordered list:
ul li::marker {
content: url("https://example.com/checkmark.png");

The ::marker pseudo-element is a powerful tool for styling the markers in your lists. By using it, you can create custom and visually appealing lists that stand out from the crowd.


::marker {
  /* ... */


<li>United States</li>
ul li::marker {
color: lime;
font-size: 1.5em;


In CSS3, pseudo-elements were denoted by two colons to make the syntax different from pseudo-classes. In CSS2, they are indicated by a single colon. Browsers generally understand both syntaxes.

Browser Support

The following table will show you the current browser support for the CSS ::marker pseudo element.

Edge Chrome Firefox Opera Safari
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview

Last updated by CSSPortal on: 1st October 2023