How to vertically align `<ol>` number to the top?

Question

I'm trying to align my <ol> numbers vertically to the top. Here's a CodePen.

ol {
  list-style-type: decimal-leading-zero;
  font-size: 11px;
}

a {
  font-size: 80px;
  text-decoration: none;
}

<nav>
  <ol>
    <li><a href="#">Header One</a><span>This is some text, don't move me</span></li>
    <li><a href="#">Header Two</a><span>This is some text, don't move me</span></li>
    <li><a href="#">Header Three</a><span>This is some text, don't move me</span></li>
    <li><a href="#">Header Four</a><span>This is some text, don't move me</span></li>
  </ol>
</nav>

Answer 1

You can use a custom counter by setting the counter-reset and counter-increment CSS properties and displaying with the before pseudo element of each li element. vertical-align: top and adjusting the line-height can be used to align the counter to the top of the text.

Demo:

ol {
  list-style: none;
  counter-reset: items;
  font-size: 11px;
}

ol li {
  counter-increment: items;
}

ol li:before {
  vertical-align: top;
  line-height: 45px;
}

ol li:before {
  content: "0" counter(items) ". ";
}

ol li:nth-child(n+10):before {
  content: counter(items) ". ";
}

a {
  font-size: 80px;
  text-decoration: none;
}

<nav>
  <ol>
    <li><a href="#">Header One</a><span>This is some text, don't move me</span></li>
    <li><a href="#">Header Two</a><span>This is some text, don't move me</span></li>
    <li><a href="#">Header Three</a><span>This is some text, don't move me</span></li>
    <li><a href="#">Header Four</a><span>This is some text, don't move me</span></li>
  </ol>
</nav>

Answer 2

If the trouble is the tall anchor element, you can apply vertical-align:top to the anchor tag. That should do the trick. You may need to adjust line-height on the <a> tag and set both line-height and margin on the <li> to make it look right. You’ll probably also want to put vertical-align:bottom on the <span>, if I get your intention right. But, based on your CodePen, I think this will get you the effect you’re looking for. Here’s my CodePen fork.

ol {
  list-style-type: decimal-leading-zero;
  font-size: 11px;
  width: 300px;
}

li {
  margin: .6em 0;
  line-height: 1.6;
}

a {
  font-size: 80px;
  text-decoration: none;
  vertical-align: top;
  line-height: .8;
}

span {
  vertical-align: bottom;
}

<nav>
  <ol>
    <li><a href="#">Header One</a><span>This is some text, don't move me. Also, let's see how this looks if the line is long and there is more than one. And what if there's more text outside the span tag? </span> And what if there's more text outside the
      span tag? In that case, just make sure that the span and the li tag have the same line height.</li>
    <li><a href="#">Header Two</a><span>This is some text, don't move me</span></li>
    <li><a href="#">Header Three</a><span>This is some text, don't move me</span></li>
    <li><a href="#">Header Four</a><span>This is some text, don't move me</span></li>
  </ol>
</nav>

Answer 3

Floated blocks are essentially treated as having no height as far as the line numbers are concerned, so if you wrap up the content of the <li> in a <div> and then float that to the left, then the line numbers will be positioned above the div.

Then, we just need to use part a clearfix to make the floated div actually take up space and ensure the items below do appear below, rather than to the right of the previous item.

ol {
  list-style-type: decimal-leading-zero;
  font-size: 11px;
}

a {
  font-size: 80px;
  text-decoration: none;
}

.listContent {
  float: left;
}

/** Clearfix **/
li {
  content: "";
  clear: both;
}

<nav>
  <ol>    
    <li><div class="listContent"><a href="#">Header Two</a><span>This is some text, don't move me</span></div></li>
    <li><div class="listContent"><a href="#">Header Three</a><span>This is some text, don't move me</span></div></li>
    <li><div class="listContent"><a href="#">Header Four</a><span>This is some text, don't move me</span></div></li>
  </ol>
</nav>

---

In the future, you'll be able to use the ::marker pseudo-element to apply specific styles to just the marker (e.g. the numbering or bullet points of a list). From what I understand, something as simple as

li::marker {
    vertical-align: top;
}

could get this done.

However, this is still in the early stages of gaining browser support at the time of writing -- you can see the support matrix here.