# 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

```css
::marker {
  /* styles */
}
```

```css
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.

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

## 4. Animation

You can animate the color or size of the marker.

```css
@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]]