Cette page monter deux exmples de compteurs élaborés avec les propriétés counter(), counter-reset et counter-increment d'une part, et les propriétés content et display ainsi qu'avec les pseudos-classes before et after.

Ces deux exemples de compteurs ne fonctionnent actuellement que sur le navigateur Opera 6.0 et supérieur. Internet Explorer et Netscape étant encore en retard dans une implémentation totale des feuilles de style en cascade (CSS).

Premier exemple

<html>
  <head>
    <style>
      h1 {counter-reset: compteur}
      h3 {counter-increment: compteur; counter-reset: compteur2}
      h3:before {
          display: marker;
          content: counter(compteur, upper-roman) ". "}
      p {counter-increment: compteur2;}
      p:before {
          display: marker;
          content: counter(compteur2, decimal) " : "}
    </style>
  <body>
    <h1>Titre</h1>
      <h3>Sous-titre 1</h3>
        <p>Paragraphe 1</p>
        <p>Paragraphe 2</p>
        <p>Paragraphe 3</p>
      <h3>Sous-titre 2</h3>
        <p>Paragraphe 4</p>
        <p>Paragraphe 5</p>
    <h1>Second Titre</h1>
      <h3>Sous-titre 1</h3>
        <p>Paragraphe 1</p>
        <p>Paragraphe 2</p>
        <p>Paragraphe 3</p>
      <h3>Sous-titre 2</h3>
        <p>Paragraphe 4</p>
        <p>Paragraphe 5</p>
        <p>Paragraphe 6</p>
  </body>
</html>

Titre

Sous-titre 1

Paragraphe 1

Paragraphe 2

Paragraphe 3

Sous-titre 2

Paragraphe 4

Paragraphe 5

Second Titre

Sous-titre 1

Paragraphe 1

Paragraphe 2

Paragraphe 3

Sous-titre 2

Paragraphe 4

Paragraphe 5

Paragraphe 6

Second exemple

<html>
  <head>
    <style>
      h2 {counter-reset: compteur}
      h4 {counter-increment: compteur; counter-reset: compteur2}
      h4:before {
          display: marker;
          content: counter(compteur, upper-roman) " - "}
      dt:before { 
          display: marker;
          content: counter(compteur2) "/ ";
          counter-increment: compteur2;
       }
       dd:after {content: " ../.."}
    </style>
  <body>
    <h2>Titre</h2>
      <h4>Titre</h4>
        <dl>
          <dt>Titre 1</dt><dd>Contenu 1</dd>
          <dt>Titre 2</dt><dd>Contenu 2</dd>
          <dt>Titre 3</dt><dd>Contenu 3</dd>
          <dt>Titre 4</dt><dd>Contenu 4</dd>
          <dt>Titre 5</dt><dd>Contenu 5</dd>
        </dl>
      <h4>Sous-titre 2</h4>
        <dl>
          <dt>Titre 1</dt><dd>Contenu 1</dd>
          <dt>Titre 2</dt><dd>Contenu 2</dd>
          <dt>Titre 3</dt><dd>Contenu 3</dd>
          <dt>Titre 4</dt><dd>Contenu 4</dd>
          <dt>Titre 5</dt><dd>Contenu 5</dd>
        </dl>
  </body>
</html>

Titre

Titre 1: Contenu 1
Titre 2: Contenu 2
Titre 3: Contenu 3
Titre 4: Contenu 4
Titre 5: Contenu 5

Sous-titre 2

Titre 1: Contenu 1
Titre 2: Contenu 2
Titre 3: Contenu 3
Titre 4: Contenu 4
Titre 5: Contenu 5