<div class="legend">
  <ol>
      <li>Cham&aelig;rops <i>humilis</i>, <i>Dwarf Palm</i>. South Europe.
          <ol>
              <li><i>Stamen Flower</i>.</li>
              <li><i>Stamens</i>.</li>
              <li><i>Fertile Flower</i>.</li>
              <li><i>Ovaries</i>.</li>
              <li><i>Fruit</i>.</li>
              <li><i>Section</i>.</li>
          </ol>
      </li>
      <li>Ph&oelig;nix <i>dactylifera</i>, <i>Date Palm</i>. Levant.
          <ol>
              <li><i>Seed</i>.</li>
              <li><i>Sprouting</i>.</li>
          </ol>
      </li>
      <li>Calamus <i>palustris</i>, <i>Rattan Palm</i>. E. Indies.</li>
      <li>Sagus <i>Rumphii</i>, <i>Sago Palm</i>. E. Indies.
          <ol>
              <li><i>Flower, opened</i>.</li>
          </ol>
      </li>
      <li>Cocos <i>nucifera</i>, <i>Cocoa-nut Palm</i>. I. Isles.</li>
      <li>Phytelephas <i>macrocarpa</i>. <i>Ivory-nut Palm</i>. Peru.</li>
      <li><i>Fruit of</i> Elais.
          <ol>
              <li><i>Seed</i>.</li>
              <li><i>Fruit without the bulb</i>.</li>
          </ol>
      </li>
      <li class="empty">
          <ol>
              <li class="outdent"><i>Section of Palm fruit</i>.</li>
          </ol>
      </li>
  </ol>
</div>
@import url(//fonts.googleapis.com/css?family=Old+Standard+TT:400,400i,700);
body {
  font-family: "Old Standard TT", "Times New Roman", Times, serif;
  font-size: 20px;
  line-height: 1.54
}

.legend li::before {
    content: counter(number) ". ";
    counter-increment: number;
    margin-left: -1.2em;
    text-align: right;
    white-space: 1.2em;
}

.legend li.empty::before { content: ""; }
.legend li.empty ol { margin-top: -1.54em; }
.legend li.outdent { margin-left: -2.3em; }

.legend ol {
  counter-reset: number;
  list-style: none;
  margin-left: 1.2em;
  padding: 0;
}

.legend ol ol { counter-reset: letter; margin: 0 0 0 1.1em; }

.legend ol ol li:before {
    content: counter(number) counter(letter, lower-alpha) ". ";
    counter-increment: letter;
    font-variant: small-caps;
    display: inline-block;
    margin: 0 0.3em 0 -1em;
    text-align: right;
    width: 2.5em;
}

.legend ol.outdent { margin-left: -0.4em; }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.