Custom bullets with CSS :: bookmark

Today we are excited to talk about the :: marker pseudo-element, which gives you the ability to design the bullet element that browsers create for you.

Creating a bookmark

the :: marker The pseudo-element marker box is automatically generated within each element of the list element, before the actual content and the :: before pseudo-element.

li::before {
content: "::before";
background: lightgray;
border-radius: 1ch;
padding-inline: 1ch;
margin-inline-end: 1ch;
}

Typically, the items in the list are

<dl>
<dt>Lorem</dt>
<dd>Lorem ipsum dolor sit amet consectetur adipisicing elit</dd>
<dd>Dolores quaerat illo totam porro</dd>
<dt>Ipsum</dt>
<dd>Quidem aliquid perferendis voluptates</dd>
</dl>

dd {
  display: list-item;
  list-style-type: "🤯";
  padding-inline-start: 1ch;
}

Combing a marker

Until :: marker, lists can be designed using list-style-type and list-style-image To change the symbol of the list item with 1 line of CSS:

li {
list-style-image: url(/right-arrow.svg);
list-style-type: '👉';
padding-inline-start: 1ch;
}

That is useful, but we need more. How about changing the color, size, spacing, etc.? That is where :: marker comes to the rescue. Allows individual and global targeting of these CSS pseudo-elements:

li::marker {
color: hotpink;
}
li:first-child::marker {
font-size: 5rem;
}

the list-style-type The property offers very limited styling possibilities. the :: marker pseudo element means that you can point to the marker itself and style it directly. This allows for more control.

That being said, you can't use all the CSS properties in a :: marker. The list of allowed and disallowed properties is clearly indicated in the specification. If you try something cool with this pseudo-element and it doesn't work, the list below is your guide to what can and can't be done with CSS:

CSS allowed :: marker Properties

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

Change the content of a :: marker It is made with content opposite to list-style-type. In the following example, the style of the first element is used list-style-type and the second with :: marker. The properties in the first case apply to the entire item in the list, not just the marker, which means that the text is animated just like the marker. When you use :: marker we can only point to the marker box and not to the text.

Also, note how the disallowed background ownership has no effect.

li:nth-child(1) {
list-style-type: '?';
font-size: 2rem;
background: hsl(200 20% 88%);
animation: color-change 3s ease-in-out infinite;
}

li:nth-child(2)::marker {
content: '!';
font-size: 2rem;
background: hsl(200 20% 88%);
animation: color-change 3s ease-in-out infinite;
}

Change the content of a bookmark

These are some of the ways you can design your bookmarks.

Change all items in the list

li {
list-style-type: "😍";
}
li::marker {
content: "😍";
}

Change only one item in the list

li:last-child::marker {
content: "😍";
}

Change a list item to SVG

li::marker {
content: url(/heart.svg);
content: url(#heart);
content: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='24' width='24'><path d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z' fill='none' stroke='hotpink' stroke-width='3'/></svg>");
}

Changing numbered lists
How about a

though? The marker in an ordered list item is a number and not a bullet by default. In CSS these are called Accountantsand they are quite powerful. They even have properties to set and reset where the number begins and ends, or change them to Roman numerals. Can we design that? Yes, and we can even use the value of the bookmark content to create our own numbering presentation.

li::marker {
content: counter(list-item) "› "; 
color: hotpink;
}

Depuration

Chrome DevTools is ready to help you inspect, debug, and modify the styles applied to :: marker pseudo elements.




Future style of pseudoelements

You can get more information about :: marker at:

It's great to have access to something that has been difficult to design. You may want to be able to design other auto-generated elements. You could be frustrated with

or the search input autocomplete flag, things that are not implemented the same in all browsers. One way to share what you need is by creating a wish in https://webwewant.fyi.