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

posted on 28.01.2020

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…”.