CSS ::marker pseudo-element

Definition and usage

CSS ::marker Pseudo-elements are used to set the style of list item markers.

This pseudo-element is applicable to any element set to display: list-item.

Note:The following properties can be used with ::marker Used together:

• All font properties
• All animation properties
• All transition properties
• color
• white-space
• content
• text-combine-upright
• unicode-bidi
• direction

Example

Example 1

Set the color and font size for all list item markers:

::marker {
  font-size: 20px;
  color: red;

Try it yourself

Example 2

Set the content, color, and font size for the list item markers of the <ul> list:

ul li::marker {
  content: "@ ";
  color: pink;
  font-size: 25px;

Try it yourself

Example 3

Set the <h2> element to display: list-item and set the content and color for the list item marker:

h2 {
  counter-increment: h2;
  display: list-item;

h2::marker {
  display: list-item;
  content: "@" counter(h2) " ";
  color: lightgreen;

body {
  counter-reset: h2;
  font-family: verdana;
  margin: 50px;

Try it yourself

CSS Syntax

::marker {
  css declarations

Technical details

Browser support

The numbers in the table specify the first browser version that fully supports this pseudo-element.

Related pages

Tutorials:CSS pseudo-element