Method 3: Numbering split lists with CSS generated content

Notes:

Opera is the only browser tested that would display the list numbers in this example; the other browsers do not support CSS generated content.
This is not one list but three separate ones arranged side by side.
Each ordered lists resets item-numbering to 1. To work around this, the stylesheet suppresses normal list item numbering and uses the pseudo-element :before to insert incremental markers before each item.
These generated item numbers are left-justified as though they were part of the list item content, not right-justified as normal list item numbers are. This causes the list item content to shift position when the number of digits in the item number changes (here, from 9 to 10).
After the three lists I’ve cleared the float with a <br /> styled { clear: left; }. This is non-semantic content (the clear should perhaps have been applied to the next element on the page that has purpose), but I wanted to highlight its necessity in keeping subsequent page elements from being affected by the float.
While in other methods I’ve styled anchors as blocks so the active area of the hyperlink expands to fill the list item box, I haven’t done so here because it would have caused each item to wrap (line-break) between the item number and the item text. The generated content is effectively inline, and when block content follows inline content it wraps to a new row.

XHTML:

<div class="outerwrap">
  <div class="wrapper">
    <ol
      ><li><a href="#">Aloe</a></li
      ><li><a href="#">Bergamot</a></li
      ><li><a href="#">Calendula</a></li
      ><li><a href="#">Damiana</a></li
      ><li><a href="#">Elderflower</a></li
    ></ol>
  </div><!-- .wrapper -->

  <div class="wrapper">
    <ol
      ><li><a href="#">Feverfew</a></li
      ><li><a href="#">Ginger</a></li
      ><li><a href="#">Hops</a></li
      ><li><a href="#">Iris</a></li
      ><li><a href="#">Juniper</a></li
    ></ol>
  </div><!-- .wrapper -->

  <div class="wrapper">
    <ol
      ><li><a href="#">Kava kava</a></li
      ><li><a href="#">Lavender</a></li
      ><li><a href="#">Marjoram</a></li
      ><li><a href="#">Nutmeg</a></li
      ><li><a href="#">Oregano</a></li
      ><li><a href="#">Pennyroyal</a></li
    ></ol>
  </div><!-- .wrapper -->

  <br />
</div><!-- .outerwrap -->

CSS:

/* separate lists from subsequent content */
div.outerwrap
{
  margin-bottom: 1em;
}

/* position list chunks side by side */
div.wrapper
{
  float: left;
  width: 10em;
}

/* clear float after lists */
br
{
  clear: left;
}

/* remove default spacing  to 
promote cross-browser consistency */
ol
{
  margin: 0;
  padding: 0;
}

/* suppress normal list item numbering */
ol li
{
  list-style-type: none;
}

/* generate new item numbers that 
continue from one list to the next */
ol li:before
{
  content: counter(item) ". ";
  counter-increment: item;
}

/* anchor styling */
ol li a
{
  text-decoration: none;
}
ol li a:hover
{
  color: #FFF; /* white */
  background-color: #A52A2A; /* brown */
}

Method 3: Numbering split lists with CSS generated content

The above markup should render like this:

Notes:

XHTML:

CSS: