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
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ć
Manuel Matuzović | Sciencx (2020-01-28T06:58:54+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/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.