Here’s what I didn’t know about list-style-type

posted on

At the CSS-in-Vienna meet-up last week Ulrich told me that starting with Chrome 79 it's possible to define a string value for the list-style-type property. I was surprised because I thought ::marker was supposed to solve that. That's why I did some research, here’s what I learned.

list-style-type accepts a string value

In Chrome 79+, Firefox 39+, and Opera 66+ it's possible to define a string value as the bullet of an ordered or unordered list, which means that emojis work, as well.

ul {
list-style-type: "🐣";
}
  • Item 1
  • Item 2

The list item may also be described as an Unicode value.

ul {
list-style-type: "\1F44D";
}
  • Item 1
  • Item 2

@counter-style is a thing

Browsing the MDN page for list-style-type I discovered that there’s a @counter-style at-rule. It allows you to define custom counter styles. It's list-style-type with super powers.

Currently, only supported in Firefox, there are several interesting options, like a list of one or multiple symbols, suffix, prefix or range. I won’t describe them here, I suggest you read about counter styles on MDN or have a look at the demos below (Firefox only).

Drooling emoji and a suffix

@counter-style drooling {
system: cyclic;
symbols: "\1F924";
suffix: ". ";
}

.counterstyle {
list-style: drooling;
}
  • Item 1
  • Item 2

3 different symbols with a prefix only applied to the 2nd, 3rd and 4th list item

  @counter-style custom {
system: cyclic;
symbols: "\1F924" "\1F44D" "\1F525";
prefix: "->";
range: 2 4;
}

.counterstyle2 {
list-style: custom;
}
  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5

Check it out on CodePen.

What about `::marker?

On HTMHell I’m using the ::marker CSS pseudo-element to select the marker box of list items, which by default contains a bullet or number, and replace is using the content attribute.

  li::marker {
content: "🔥";
font-size: 2.6rem;
}
  • Item 1
  • Item 2

What’s great about ::marker is that you can finally style bullets.

  .li::marker {
color: #FF00FF;
font-size: 2em;
}
  • Item 1
  • Item 2

Only all font properties, color, text-combine-upright, unicode-bidi, direction and content can be used with ::marker.

While it’s possible to change the content, I’d say that the main purpose of ::marker is styling, and list-style-type and @counter-style are responsible for the value of the bullet.

This post is part of a series called “Here’s what I didn’t know about…”.