::marker CSS Pseudo Element

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

Description

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.

Syntax

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

Example

HTML

<ul>

  <li>Australia</li>

  <li>England</li>

  <li>United States</li>

</ul>

CSS

ul li::marker {

  color: lime;

  font-size: 1.5em;

}

Result

Editor

Notes

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.