List Properties in CSS

CSS provides several properties specifically for styling lists. These properties are used to control the appearance and layout of ordered and unordered lists. Here’s a brief overview:

1. list-style

• A shorthand property for setting list-style-type, list-style-position, and list-style-image.

• Values: Combination of list-style-type, list-style-position, and list-style-image.

  list-style: square inside url('bullet.png');
  

2. list-style-type

• Specifies the type of list item marker.
• Values:
  • For unordered lists: disc, circle, square
  • For ordered lists: decimal, decimal-leading-zero, lower-alpha, upper-alpha, lower-roman, upper-roman

  list-style-type: circle;
  

3. list-style-position

• Defines the position of the list item marker relative to the content.

• Values:

  • inside (marker is inside the content flow)
  • outside (marker is outside the content flow, default)

  list-style-position: inside;
  

4. list-style-image

• Specifies an image to be used as the list item marker.

• Values: URL of the image or none to remove the marker.

  list-style-image: url('bullet.png');
  

5. counter-reset

• Creates and resets counters for numbering list items.

• Values: <counter-name> and optionally a starting value.

  counter-reset: item 0;
  

6. counter-increment

• Increments counters for list items.

• Values: <counter-name> and optionally an increment value.

  counter-increment: item 1;
  

7. content

• Used with ::before and ::after pseudo-elements to insert content before or after list items.

• Values: String, counter(), counter-reset(), attr(), etc.

  li::before {
    content: counter(item) ". ";
  }
  

Example Usage

Here’s a complete example of how these properties might be used:

ul {
  list-style-type: square;
  list-style-position: inside;
}

ol {
  list-style-type: upper-roman;
  list-style-position: outside;
  list-style-image: url('number.png');
}

li::before {
  content: counter(item) ". ";
  counter-increment: item;
}