CSS3 Tests: List Styles
On this page is a test of new List Style Types in CSS3.
Values
CSS3 introduces values like box and diamond. The only way to get those types of list styles before is with list-style-image.
Examples
Below is a list. Each list item has the value it says. If your browser does’t support a value, it will be a regular bullet (on IE5 Mac it’s a number).
- This has
list-style-type: box
- This has
list-style-type: diamond
- This has
list-style-type: check
- This has
list-style-type: asterisks
- This has
list-style-type: hyphen
- This has
list-style-type: footnotes
::marker
This pseudo-class is tested here because it only applies to lists. It is used to replace bullets and such with text. For example UL { list-style-image: url(image.gif) } and LI::marker { content: url(image.gif) } do the exact same thing. See the spec. Below is the testsheet.
LI::marker {
content: "(" counter(counter) ")";
width: 25%;
text-align: center;
}
LI {
display: list-item;
counter-increment: counter;
}
If the below list has a number in parentheses before it your browser supports ::marker. If you see a bullet, your browser does’t support it.
- This is the first item
- This is the next one.
- The CSS3 Tests, brought to you by Dante.
Results
No support for IE, Mozilla, or Safari; Opera supports list-style-type: box.