Lists and Counters

Tagged in:
• css
• ::marker
• lists

Some notes from an excellent article by Stephanie Eckles at Modern CSS

Using emoji for bullets

Emoji are weird things, part font and part image it seems. Because you can use them directly in the source code you can add them using a custom HTML data attribute to any element including list items:

1<ul>
2    <li data-bullet="😁">
3    <li data-bullet="🐒">
4    <li data-bullet="🦢">
5</ul>

You can then use this with the ::before pseudo element with content:

1li::before {
2    content: attr(data-bullet);
3    font-size: 1.25em
4}

(The way Stephanie does this is by setting each list item to display: grid) however the more modern way uses…

CSS ::marker

The CSS ::marker selector is for styling the bullet points or numbers on lists. It’s easy to have a different colour bullet than the text:

1li::marker {
2    color: orangered;
3}

However ::marker can also accept 'content with a data attribute which makes it easier to use those emoji’s above:

1li::marker {
2    content: attr(data-bullet);
3    font-size: 1.25em;
4}

Stephanie recommends adding some left-margin if needed to the <ul> to prevent cut off by overflow. Also some left padding for the <li> element.

The ::marker selector can have the following CSS properties:

• animation-*
• color
• content
• direction
• font-*
• transition-*
• unicode-bidi
• white-space

(I have no clue what unicode-bidi is)

• ◀ Previous
• Next ▶