html - 如何将 `<ol>`数字垂直对齐到顶部？

Question

我正在尝试将<ol>数字垂直对齐到顶部。这是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

您可以通过设置counter-reset和counter-increment CSS属性并使用每个li元素的before伪元素进行显示来使用自定义计数器。 vertical-align: top和调整line-height可用于将计数器与文本顶部对齐。
演示:

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>