CSS列表项垂直对齐

Question

我发现了我认为今天我从未见过的CSS问题：

这是两个单独的有序列表。在第二个列表中，数字1与项目符号点的底部对齐，而不是与顶部对齐，这是我以前见过的唯一方式（也是我想要的）。

这两个列表的代码是相同的，只是第一个没有锚标记，而第二个列表的代码是：

这是WordPress网站上的一个帖子的一部分，这个主题的主要CSS文件，如果没有明确，是数千行，因此对我来说有点压倒性。

因为我从未见过像这样格式化的子弹点，甚至没有意识到它可以完成，任何人都能指出我应该在CSS文件中寻找什么CSS功能所以我可以将数字顶部对齐到关联文本？

谢谢！

==========

更新：

我认为这是控制这种格式的CSS块：

body.single .single-inner-wrapper article#single-article .entry-content a {
    color: #41b5f9;
    position: relative;
    line-height: 1.2;
    display: inline-block;
    z-index: 1
}

感谢G-Cyr的建议，我添加了一个垂直对齐：顶部到此部分，它似乎已将第二个列表上的数字从底部对齐移动到顶部对齐。在哪里我想要它。

感谢所有帮助过的人！

Answer 1

来自MDN：

CSS计数器允许您根据文档中的位置调整内容的外观。

这是一个简短的例子，展示了如何使用它。

• 将默认list-style设置为none
• 始终重置父元素中的计数器
• 增加每个li的计数器数量
• 确保li相对定位
• 存储实际数字加上“。”在伪元素content
• 仅显示非空的lis的数字
• 风格你喜欢

.my-list {
  counter-reset: my-list-title;
  list-style: none;
  max-width: 400px;
}

.my-list li {
  counter-increment: my-list-title;
  position: relative;
}

.my-list li:not(:empty)::before {
  content: counter(my-list-title) ".";
  position: absolute;
  bottom: 0;
  left: -1.2em;
}

<ol class="my-list">
  <li>xxxx xxxx xxxxxxx xxxxxx xxxxx xxxxx xxxxxxx xxxxxx xxxxx xxxxx</li>
  <li>xxxx xxxx xxxxxxx xxxxxx</li>  
</ol>

jsFiddle

Answer 2

我认为这是控制这种格式的CSS块：

body.single .single-inner-wrapper article#single-article .entry-content a {
    color: #41b5f9;
    position: relative;
    line-height: 1.2;
    display: inline-block;
    z-index: 1
}

感谢G-Cyr的建议，我添加了一个垂直对齐：顶部到此部分，它似乎已将第二个列表上的数字从底部对齐移动到顶部对齐。在哪里我想要它。

感谢所有帮助过的人！