Creating Legal List Numbering only using CSS

If you want to create lists with legal style numbering, here's a way to do it. It's quick, clean, and tidy. It results in lists that automatically do this sort of thing:

1. Section

    1.1 Clause

        1.1.1 Sub-Clause


And here's some sample HTML Code:

    <title>Sample of Legal List using CSS</title>
    <link type="text/css" rel="stylesheet" href="" />
  <body id="legal-list" >
    <h1>Sample of Legal List Numbering using CSS</h1>
    <h2>Section One</h2>
      <li>Clause One</li>
      <li>Clause Two
          <li>Clause Two sub One</li>
          <li>Clause Two sub Two</li>
          <li>Clause Two sub Three</li>
      <li>Clause Three</li>
    <h2>Section Two</h2>
      <li>Clause One</li>
      <li>Clause Two</li>
      <li>Clause Three
          <li>Clause Three sub One
              <li>Clause Three sub One sub One </li>
              <li>Clause Three sub One sub Two</li>
              <li>Clause Three sub One sub Three</li>
          <li>Clause Three sub Two</li>
          <li>Clause Three sub Three</li>

The CSS looks like this:

/* legal list styles */
#legal-list {
  counter-reset: section;
#legal-list h2:before {
  counter-increment: section;
  content: counter(section) ". ";
  margin: 0 0.5em 0 0;
#legal-list ol {
  counter-reset: clause;
  list-style: none outside none;
  text-indent: -2em;
#legal-list ol li {
  counter-increment: clause;
#legal-list ol li:before {
  content: counter(section) "." counters(clause, ".") ". ";
  margin: 0 0.5em 0 0.5em;

And here's what it should look like:

To try this, just download the attached files (or copy and paste the blocks above into your own files with the same names) and open the legal-list-sample.html file in your browser.