Home » Programming » Css » Marker Pseudo Element
📌 Pin 🔗 Copy Link 📋 Copy Markdown ⬇️ Download
1 min read

CSS ::marker Pseudo-element

The ::marker pseudo-element selects the marker box of a list item, which typically contains a bullet or number. It works on any element with display: list-item, such as <li> or <summary>.

1. Syntax

::marker {
  /* styles */
}
li::marker {
  color: red;
  font-size: 1.2em;
}

2. Allowed Properties

Only a limited set of CSS properties can be used with ::marker:

  • color
  • content (e.g., replacing the bullet with a string or url())
  • font-* properties (font-size, font-weight, font-family, etc.)
  • animation and transition properties
  • text-combine-upright, unicode-bidi, direction

Properties like background, width, margin, or padding are not supported. To style the spacing or background of a bullet, you often still need to use ::before or wrap the content in a <span>.

3. Changing the Marker Content

You can replace the default bullet/number with custom content.

li::marker {
  content: "✅ ";
}

4. Animation

You can animate the color or size of the marker.

@keyframes color-change {
  from { color: blue; }
  to { color: green; }
}

li::marker {
  animation: color-change 2s infinite alternate;
}

programming/css/css programming/css/pseudo-classes-and-pseudo-elements

Created: March 17, 2026 • Last Modified: February 1, 2026