list-style-type

Values

• Symbols: disc (filled bullet, the initial value), circle (hollow), square, disclosure-closed / disclosure-open (disclosure triangles).
• Numbers and letters: decimal (1. 2. 3.), decimal-leading-zero (01.), lower-roman (i.), lower-alpha (a.), cjk-decimal (一、二、三、) and more. They count the items in order.
• Japanese: hiragana (あ、い、う、), hiragana-iroha (い、ろ、は、), japanese-informal (一、二、), japanese-formal (壱、弐、参、) and more.
• A string: with "★ " that text becomes the marker. Add a trailing space to separate it from the item text.
• none: no marker.

Where to set it

Markers appear on elements with display: list-item (normally <li>). list-style-type is inherited, so setting it on <ul> or <ol> covers every item. In the preview here, the three items take the value set on the box.

Watch out

• Reset styles such as Tailwind CSS set list-style: none on ul and ol. To bring markers back, set list-style-type on them again.
• Safari’s screen reader (VoiceOver) may stop announcing a list styled with list-style: none as a list. Add <ul role="list"> to keep it a list while hiding the markers.
• Style the marker’s color and size with the ::marker pseudo-element. To define your own counting system, use @counter-style (the inline symbols() function works only in Firefox).