"This first rule of styling lists is that they should be treated with the same reverence you would show any other text. If a list is inserted within a passage of text, treat it as a continuation and integral part of that text. For bulleted or unordered lists, use padding to indent each list item the equivalent distance of a line height. This will allow the bullet to sit neatly in a square of white-space."
"You can change which bullets are used through the list-style-type property with values of disc, circle and square respectively. For example, to make all unordered list items filled squares use: If you want to use a different symbol for a bullet you can do so by specifying it in quote marks. You're not limited to individual characters - as well as regular glyphs, you can use words and emoji."
"The default style for numbered or ordered lists is a decimal progression, with each number followed by a full stop. You can change the numbering system to alphabetical or Roman numerals by applying the lower-latin, upper-latin, lower-roman, upper-roman or decimal values of list-style-type. You can also select from many non-Latin numbering systems such as Greek, Devanagari, Persian and Katakana - you'll need to use these even when the document or element has the appropriate language set."
Lists must be treated as integral parts of surrounding text and styled with typographic care. Unordered lists default to filled discs, then circles and filled squares at deeper nesting levels, and can be changed via list-style-type or replaced with custom characters or emoji. Images can be used as bullets with list-style-image, and bullets can be positioned inside or outside the text flow. Use padding equal to line height to align bullets. Ordered lists default to decimal numbering but can switch to alphabetic, Roman, or many non-Latin numbering systems using list-style-type values.
Read at Piccalilli
Unable to calculate read time
Collection
[
|
...
]