Css 使用伪元素作为列表编号，并使编号相对于列表项垂直居中

正如它在标题中所说的，我希望尝试垂直居中排列由伪元素组成的有序列表的编号。下面是问题的设置

<ul class="colored-list">
    <li>
    Here's some text
    </li>
    <li>
    Here's some text, enough of it to spill onto the next line
    </li>    
</ul>

---

我想要的是红色数字相对于列表项垂直居中。例如，“1”应该介于“heres”和“text”之间

---

这可能吗？如果可能，最好的实现是什么

您完全可以相对于父元素定位伪元素

然后可以使用

top:50%

/

transform:translateY（-50%）

组合进行垂直居中

使用

right:100%

，而不是像

marginleft:-22px那样使用负的边距：


尝试使列表
显示：表格
和
:before
显示：表格单元格
，然后使用
垂直对齐：中间
。你将不得不玩弄你的边距和填充物。给你：

ul.colored-list { list-style: none; max-width: 100px; }
    ul.colored-list > li {counter-increment: step-counter; font-size: 16px; display: table; }
    ul.colored-list > li:before { color: red;content: counter(step-counter); font-size: 35px; margin-left: -14px; padding-right: 8px; display: table-cell; vertical-align: middle; }

是否允许更改标记？
ul.colored-list > li {
    position: relative;
    counter-increment: step-counter;
    font-size: 16px;
}
ul.colored-list > li:before {
    color: red;
    content: counter(step-counter);
    font-size: 35px;
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
}

ul.colored-list { list-style: none; max-width: 100px; }
    ul.colored-list > li {counter-increment: step-counter; font-size: 16px; display: table; }
    ul.colored-list > li:before { color: red;content: counter(step-counter); font-size: 35px; margin-left: -14px; padding-right: 8px; display: table-cell; vertical-align: middle; }