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.