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
, andlist-style-image
.Values: Combination of
list-style-type
,list-style-position
, andlist-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;
- For unordered lists:
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;
}