Styling list markers

Let's say you have a list:

<ul>
  <li>W3C</li>
  <li>Web</li>
  <li>TPAC</li>
</ul>

But what if you want to style the bullets to look more amazing? Then ::marker comes to the rescue!

<style>
::marker { font-size: 200%; content: attr(data-marker) " " }
</style>
<ul>
  <li data-marker="🦄">W3C</li>
  <li data-marker="😍">Web</li>
  <li data-marker="🗣️">TPAC</li>
</ul>

::marker is a tree-abiding pseudo-element, just like ::before and ::after. However, it only accepts a limited subset of properties.

One of these properties is content. By default it's set to normal, but you can set it to none to suppress it, or to the desired string, url(), counter(), etc.

It can also be styled with any inherited property, like font-size. Even if it has no direct effect on the marker box itself, it will still be able to affect its contents.

And you can even use animations and transitions!

<style>
@keyframes anim {
  from { color: blue }
  to { color: orange }
}
::marker {
  animation: anim 1s infinite alternate linear;
  font-weight: bold;
  font-size: 200%;
}
</style>
<ol>
  <li>W3C</li>
  <li>Web</li>
  <li>TPAC</li>
</ol>

When customizing the contents of the ::marker, it can be convinient to use counter(list-item) to get the number of the current list item:

<style>
::marker {
  content: "[" counter(list-item) "] ";
}
</style>
<ol>
  <li>W3C</li>
  <li>Web</li>
  <li>TPAC</li>
</ol>

However, in that case it's probably more convenient to use another tool: @counter-style.

This at-rule lets you create a custom list style that can then be referenced in list-style-type:

<style>
@counter-style my-style {
  system: extends decimal;
  prefix: "[";
  suffix: "] ";
}
ol {
  list-style-type: my-style
}
</style>
<ol>
  <li>W3C</li>
  <li>Web</li>
  <li>TPAC</li>
</ol>

However, for very simple cases, it's probably easier to set list-style-type to a string:

<ul>
  <li style="list-style-type: '🦄 '">W3C</li>
  <li style="list-style-type: '😍 '">Web</li>
  <li style="list-style-type: '🗣️ '">TPAC</li>
</ul>