关于有序列表阴影不对齐的解决方案

最近看到了一篇关于 自定义有序列表 的 CSS 分享，但是实际操作会使阴影与标号不对齐，以下是我捣鼓的解决方案

第一段 css

.li > .protyle-action { height: 42px; line-height: 19px; }

这个是调整编号文字的位置的，直接新建一个 css 片段添加就可以，当然可以改改数字试试效果，这个数字是我试过的，我觉得还行

以下改动在原帖 https://ld246.com/article/1746943932806代码基础上进行修改

第二个改动

/* 第一层嵌套：阿拉伯数字 (1. 2. 3.) */ .li[data-subtype="o"] > .protyle-action::after { counter-increment: o1; content: counter(o1, decimal) "."; position: absolute; padding: 3px 2px; width: 24px; display: flex; justify-content: center; margin: -14px 0 0 -15px !important; }

这里改动的是 margin，改成 margin: -14px 0 0 -15px !important 就可以了

第三个改动

/* 第二层嵌套：中文括号 + 阿拉伯数字 (（1） （2） （3）) */ .li[data-subtype="o"] .li[data-subtype="o"] > .protyle-action::after { counter-increment: o2; content: "（" counter(o2, decimal) "）"; position: absolute; }

这里改动的是 最后新增加了一个参数 top: 54%;

改动之后应该就对齐，另外我使用的主题是 QYL，还是挺好看的

效果图

可以看到不会有位置错位了。