List Style Recipes

HTML List Style Guide: Play with Ordered and Unordered Lists

HTML lists are the basic elements of web page construction! They are widely used in scenarios such as blog posting, recipe ingredients lists or navigation menus. Listings not only provide a rich space for style customization, but are also crucial to the accessibility of web pages. For example, a screen reader will read the number of list items to provide the user with the context information of the list.

This article will focus on the style settings of ordered and unordered lists (the definition list will be skipped for the time being), and explore some uncommon style application scenarios.

List style basics

Before you perform complex style design, understanding the various preset values ​​of list-style-type attribute can meet many basic needs.

Interrupt ordered list number

The starting number of the ordered list can be customized.

Nested decimal number

Top 10 lists arranged in reverse order

Just use the reversed property to achieve it.

Image bullets

The best solution is to use background-image attribute of the pseudo-element. list-style-image attribute has very limited functions, such as the image position or size cannot be adjusted.

Emoji bullets

Manually specify the "random" order

value attribute specifies the bullet used by the list item.

Custom text counter

Optimal control can be achieved using pseudo-elements, list-style-type: '-'; is also an easy way.

Inside and outside the bullet position

list-style-position: outside; (default) makes the list alignment more beautiful, but bullets will be rendered outside the element, so you need to be careful not to be cropped or overflowed. The last two examples show the trick of simulating external alignment effects while bullet rendering is inside an element.

Colored bullets

Three methods:

1. ::marker (the latest and easiest way)
2. Classic pseudo-element style
3. background-image (This example uses SVG data URL to facilitate color control through CSS)

Multi-column list

The number of columns can be adjusted automatically.

Colored circle number

Custom loop list symbols

list-style: symbols() can create one-time custom symbols, while @counter-style can create reusable symbol sets (currently only supported by Firefox).

The above is the detailed content of List Style Recipes. For more information, please follow other related articles on the PHP Chinese website!