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

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


This content originally appeared on Web development blog - Manuel Matuzović and was authored by Manuel Matuzović

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


This content originally appeared on Web development blog - Manuel Matuzović and was authored by Manuel Matuzović


Print Share Comment Cite Upload Translate
APA
Manuel Matuzović | Sciencx (2023-02-04T23:33:55+00:00) » Here’s what I didn’t know about list-style-type. Retrieved from https://www.scien.cx/2020/01/28/heres-what-i-didnt-know-about-list-style-type/.
MLA
" » Here’s what I didn’t know about list-style-type." Manuel Matuzović | Sciencx - Tuesday January 28, 2020, https://www.scien.cx/2020/01/28/heres-what-i-didnt-know-about-list-style-type/
HARVARD
Manuel Matuzović | Sciencx Tuesday January 28, 2020 » Here’s what I didn’t know about list-style-type., viewed 2023-02-04T23:33:55+00:00,<https://www.scien.cx/2020/01/28/heres-what-i-didnt-know-about-list-style-type/>
VANCOUVER
Manuel Matuzović | Sciencx - » Here’s what I didn’t know about list-style-type. [Internet]. [Accessed 2023-02-04T23:33:55+00:00]. Available from: https://www.scien.cx/2020/01/28/heres-what-i-didnt-know-about-list-style-type/
CHICAGO
" » Here’s what I didn’t know about list-style-type." Manuel Matuzović | Sciencx - Accessed 2023-02-04T23:33:55+00:00. https://www.scien.cx/2020/01/28/heres-what-i-didnt-know-about-list-style-type/
IEEE
" » Here’s what I didn’t know about list-style-type." Manuel Matuzović | Sciencx [Online]. Available: https://www.scien.cx/2020/01/28/heres-what-i-didnt-know-about-list-style-type/. [Accessed: 2023-02-04T23:33:55+00:00]
rf:citation
» Here’s what I didn’t know about list-style-type | Manuel Matuzović | Sciencx | https://www.scien.cx/2020/01/28/heres-what-i-didnt-know-about-list-style-type/ | 2023-02-04T23:33:55+00:00
https://github.com/addpipe/simple-recorderjs-demo