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