<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>