如何在调整li::marker大小后实现其与列表内容的垂直对齐

问题根因 #

::marker 伪元素支持的CSS属性范围有限，transform、position、vertical-align 等布局调整属性均不被浏览器兼容，因此你之前的调整尝试无法生效。

符合要求的解决方案 #

使用CSS计数器+::before伪元素+Flex布局实现，完全满足你提出的三个要求：

• 无需修改原有HTML结构，无额外新增标签
• 无硬编码的位置偏移值，列表内容或标记字号变动时自动适配对齐
• 纯CSS实现，无需引入JavaScript

无序列表实现代码

ul {
  list-style: none;
  padding-left: 0;
}
li {
  display: flex;
  align-items: center;
  gap: 0.2em; /* 标记与内容的间距，em单位会随字号自动适配 */
}
li::before {
  content: "•";
  color: grey;
  font-size: 3.5rem;
}

原有HTML不需要做任何修改：

<ul>
  <li>Hello</li>
  <li>Gromit</li>
</ul>

有序列表适配方案

如果需要适配有序列表，新增CSS计数器逻辑即可，HTML同样无需修改：

ol {
  list-style: none;
  padding-left: 0;
  counter-reset: list-counter;
}
ol li {
  display: flex;
  align-items: center;
  gap: 0.2em;
  counter-increment: list-counter;
}
ol li::before {
  content: counter(list-counter) ".";
  color: grey;
  font-size: 3.5rem;
}

内容的提问来源于stack exchange，提问作者Shawn