<p>Please Note: As of May 2017, only FireFox supports the @counter-style rule. In any other browser, you should see the default counters.</p>
<h1>Grades in My Class</h1>
<ol class="circledletters">
<li>Perfect</li>
<li>Doing Well</li>
<li>Barely Adequate</li>
<li>Do you want fries with that?</li>
</ol>

<h1>How to Shave a Face</h1>
<ol class="circlednumbers">
<li>Wash face.</li>
<li>Apply shaving cream.</li>
<li>Use sharp razor to scrape hair off face.</li>
<li>Apply after-shave lotion.</li>
<li>Scream loudly.</li>
</ol>
<h1>The History of Music Before 1750</h1>
<p>When you wish to present a hierarchical outline, specify the type of number used for each level of the list. When using @counter-style, the class overrides the type attribute. Use the fallback property in the CSS. Use prefix and suffix properties to add content to the icon.</p>
<ol type="I">
<li>Medieval (500-1450)
  <ol class="parenthesizednumbers" type="A">
    <li>Gregorian Chant</li>
    <li>Organum and early polyphony</li>
    <li>Motets</li>
  </ol>
</li>
<li>Renaissance (1450-1600)
  <ol class="parenthesizednumbers" type="A">
    <li>Cantus Firmus Masses (Palestrina)</li>
    <li>Madrigals (Willaert, Lassus, Gesualdo)</li>
  </ol>
</li>
<li>Baroque (1600-1750)
  <ol class="parenthesizednumbers" type="A">
    <li>Monody (Early Baroque - Caccini, Peri, Monteverdi)</li>
    <li>Complex Counterpoint (Late Baroque)</li>
    <li>Concerto Grosso (Bach, Vivaldi)</li>
  </ol>
</li>
</ol>

<h1>Ordered List with Icons</h1>
<ol class="sportsgif">
<li>Baseball</li>
<li>Basketball</li>
<li>Soccer</li>
<li>Football</li>
</ol>

<h1>Ordered List with Dice as numbers</h1>
<ol class="dice">
  <li>Items 1 through 6 show one Die.</li>
  <li>Items 1 through 6 show one Die.</li>
  <li>Items 1 through 6 show one Die.</li>
  <li>Items 1 through 6 show one Die.</li>
  <li>Items 1 through 6 show one Die.</li>
  <li>Items 1 through 6 show one Die.</li>
  <li>Items after 6 require 2 or more dice.</li>
  <li>Items after 6 require 2 or more dice.</li>
  <li>Items after 6 require 2 or more dice.</li>
  <li>Items after 6 require 2 or more dice.</li>
  <li>Items after 6 require 2 or more dice.</li>
  <li>Items after 6 require 2 or more dice.</li>
  <li>Items after 6 require 2 or more dice.</li>
  <li>Items after 6 require 2 or more dice.</li>
  <li>Items after 6 require 2 or more dice.</li>
  <li>Items after 6 require 2 or more dice.</li>
  <li>Items after 6 require 2 or more dice.</li>
  <li>Items after 6 require 2 or more dice.</li>
  <li>Items after 6 require 2 or more dice.</li>
  <li>Items after 6 require 2 or more dice.</li>
  <li>Items after 6 require 2 or more dice.</li>
  <li>Items after 6 require 2 or more dice.</li>
  <li>Items after 6 require 2 or more dice.</li>
</ol>
body {font-family:sans-serif;font-size:110%;margin-left:40px;}
h1 {font-size:120%;margin-top:40px;0px;margin-bottom:2px;}
@counter-style circled-alpha {
  system: fixed;suffix: " ";
  symbols: Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ Ⓚ Ⓛ Ⓜ Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ Ⓣ Ⓤ Ⓥ Ⓦ Ⓧ Ⓨ Ⓩ;
  
}
@counter-style circled-numbers {
  system: fixed;suffix: " ";
  symbols: ① ② ③ ④ ⑤ ⑥ ⑦ ⑧ ⑨ ⑩ ⑪ ⑫ ⑬ ⑭ ⑮ ⑯ ⑰ ⑱ ⑲ ⑳;
}
@counter-style paren-numbers {
  system: fixed;prefix: "\266b  ";suffix:" ";fallback:upper-alpha;
  symbols: ⑴ ⑵ ⑶ ⑷ ⑸ ⑹ ⑺ ⑻ ⑼ ⑽;
}
@counter-style sportsballs {
  system: fixed;suffix:" ";
  symbols: ⚾ 🏀 ⚽ 🏈;
}
p {max-width:700px;line-height:1.35em; }
li {margin-top:0.5em;margin-bottom:0.5em;}
ol {margin-top:0.5em;margin-bottom:1.0em;}
.circledletters {list-style: circled-alpha;}
.circlednumbers {list-style: circled-numbers;}
.parenthesizednumbers {list-style: paren-numbers;}
.sportsgif {list-style: sportsballs;}

/* https://drafts.csswg.org/css-counter-styles/#counter-styles*/
/* Amelia Bellamy-Royds supplied this code as an example of using system:additive instead of system:fixed. Thanks Amelia. */
@counter-style dice {
  system: additive;
  additive-symbols: 6 ⚅, 5 ⚄, 4 ⚃, 3 ⚂, 2 ⚁, 1 ⚀;
  suffix: " ";
}
ol.dice {
  margin-left:60px;
  list-style-type: dice;
  font-size:2em;
}
ol.dice li::marker {
  color: red;
  /*The ::marker pseudo element is still a proposed spec and is not yet supported even in FireFox*/
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.