Styling Unordered Lists
Example 1 - Simply changing the list-style-type of your unordered list is enough to create a bit of customization:
- Item One
- Second Item
- Tertiary Bits
- Thing Four
Example 2 - Adding a bit of extra margin and padding to your list and list items can really help the list stand out from the rest of your text:
- Item One
- Second Item
- Tertiary Bits
- Thing Four
Example 3 - Using a list-style-image instead of one of the default bullets gives you a nearly infinite number of ways to make yours lists unique:
- Item One
- Second Item
- Tertiary Bits
- Thing Four
Example 4 - Using a :hover pseudo-class can help your list seem more dynamic (and could help readers keep their place in long lists), but it doesn't work in IE6:
- Item One
- Second Item
- Tertiary Bits
- Thing Four
Example 5 - Everything and the kitchen sink. We're using a :hover pseudo-class with multiple list-style-images and some margins and padding to get everything just the way we want:
- Item One
- Second Item
- Tertiary Bits
- Thing Four