Skip to main content

It is now trivial to customize the color, size or type of number or bullet when using a

    or

      .


      Updated

Thanks to Bloomberg sponsored Igalia, we can finally save our cheats for style lists. Watch!

marker-fun-1069220
View source

Thanks to CSS :: marker we can change the content and some of the bullet and number styles.

Browser compatibility

When Chromium 86 releases, :: marker it will be compatible with Firefox for desktop and Android, desktop Safari and iOS Safari, and Chromium-based desktop and Android browsers. See MDN Browser compatibility update table.

Pseudo-elements

Consider the following essential HTML messy list:

< ul >
< li > Lorem ipsum pain sit amet consectetur adipisicing elit li >
< li > Dolores quaerat illo totam porro
li >
< li > Quidem aliquid perferendis voluptates
li >
< li > Ipsa adipisci fugit assumenda dicta voluptates nihil reprehenderit consequatur alias facilis rem
li >
< li > Leak
li >
ul >

Which results in the following unsurprising representation:

The point at the beginning of each

  • The item is free! The browser is drawing and creating a marker box generated for you.

    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.

    Key term:
    A pseudo-element represents an element of the document other than those that exist in the document tree. For example, you can select the first line of a paragraph using the pseudo-element p :: first-line, although there is no HTML element that wraps that line of text.

    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

  • HTML elements, but other elements can also be converted to list elements with display: list-item.

    < dl >
    < dt > Lorem dt >
    < dd > Lorem ipsum pain 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 ;
    }

    Caution:
    If the above list does not have pink bullets, then :: marker it is not compatible with your browser.

    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.

    List styles

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

    Mixed results between bookmark and list item

    Marker Styles

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

    Results focused between marker and list item

    Gotchas!

    In chrome, white-space only works for markers placed inside. For markers placed on the outside, the style adjuster always forces white-space: pre to preserve the final space.

    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, " ) ;
    }

    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.

      devtools-1804244

      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.

  • error: Attention: Protected content.