list-style-type: <string>

CSS

In CSS2, list-style-type only accepted keyword values like "disc" or "decimal". This defines the appearance of the list item marker when there is no marker image. Later CSS Lists expanded the syntax of list-style-type to allow arbitrary strings.

Being able to use arbitrary characters as a marker, like "-", "+", "★" or "▸". Without this, developers are usually forced to hide the real marker and insert the text into a ::before pseudo-element via the content property. However, the fake marker won't be nicely positioned by list-style-position. Another approach would be rasterizing the text into an image, or writing a SVG data URI with the text, and setting it to list-style-image. But this is not convenient, and the result may not look good because marker images have a small size (half the ascent of normal text).

Documentation

Specification

Working draft or equivalent

Status in Chromium

Blink>CSS


Enabled by default (tracking bug) in:

  • Chrome for desktop release 79
  • Chrome for Android release 79
  • Android WebView release 79

Consensus & Standardization

After a feature ships in Chrome, the values listed here are not guaranteed to be up to date.

Owner

Last updated on 2019-10-10