Goodbye, list-style-type

Previously, to create beautiful markers (bullets) in lists, you had to hide standard ones and draw your own via ::before. The pseudo-element ::marker does this officially and simply.

What Can Be Changed:

You can style the marker of <li> or any element with display: list-item.

li::marker {
  color: var(--accent);
  font-size: 1.2em;
  content: "✦ "; /* Can replace standard dot with any symbol */
}

Available Properties:

Unfortunately, for performance reasons, only a limited set of properties can be used for ::marker: color, font, content, white-space, and direction.