Hosting Solutions
mobile_logo Table of Contents
seal_frontseal_back

counter style

The @counter-style rule specifies a custom counter style to replace the default style for list markers and counters.

Code Example

Note: This only works in Firefox for the time being. <style> @counter-style custom1 { prefix: "- "; system: fixed; symbols: "1st" "2nd" "3rd" "4th" "5th"; suffix: " place - "; } ol { list-style: custom1; padding-left:100px; } </style> <h2>Top 5 Players</h2> <ol> <li>Jack Smith</li> <li>Erica Johnson</li> <li>William Anderson</li> <li>Sarah Hanes</li> <li>Oscar Bloom</li> </ol>

Descriptors

system specify which algorithm is used to render the marker/counter values. cyclic, fixed, symbolic, alphabetic, numeric, additive, extends negative - format negative counter values. prefix - add content to the beginning of marker/counter values. suffix - add content to the end of marker/counter values. range - limit the counter scope. pad - add a symbol to markers that are less than the pad value. fallback - specify a fallback counter style when the current style fails to represent a marker properly. symbols - the symbols to be used in the marker replacement sequence. additive-symbols - additive symbols to be used in the marker replacement sequence. speak-as - specify how speech synthesis software should handle the marker representations.

Official Documentation

http://www.w3.org/TR/css-counter-styles-3/

CSS

At Rules

charsetcounter styledocumentfont facefont feature valuesimportkeyframesmedianamespacesupports