css ::marker pseudo-element

CSS Marker pseudo element

09 Feb, '21css1 min.

In this series, of exploring CSS functionality from the (hopefully, very near) future, I look at the ::marker pseudo-element.

 

View ::marker Demo

Concept

The ::marker CSS pseudo-element selects the marker box of a list item, which typically contains a bullet or number, thus allowing them to be styled or have their content value customized.

This is exciting because rather than use ::before pseudo-selector, which is  currently usually used for marker box (list bullet and number) styling, we get to use  a more native implementation.  Coupled with other CSS properties such as counter, this becomes a strong tool in our list-styling arsenal.

It works on any element or pseudo-element that is set to display: list-item, such as the ol ul li summary as well as custom elements.

As it stands, only a few CSS properties (listed below) can currently be used in a rule with marker selector, but more should be supported in future.

  • font
  • white-space
  • color
  • animation
  • transition
  • content
  • text-combine-upright, unicode-bidi and direction

Syntax



 

Demo

 

Browser Support

Data on support for the css-marker-pseudo feature across the major browsers from caniuse.com

Basically, the ::marker pseudo-element will target the bullet-point or number generated by a list-item; giving more control over styling and customisation.

© 2021Prince Bazawule