如何垂直对齐列表项标记

Question

我正在尝试使用以下 CSS 来增加列表项标记的大小：

\n

\r\n

\r\n

li::marker {\n  color: grey;\n  font-size: 3.5rem;\n}

\r\n

<ul>\n  <li>Hello</li>\n  <li>Gromit</li>\n</ul>

\r\n

\r\n

\r\n

\n

调整大小效果完美，但标记不再与列表项内容垂直对齐。

\n

我尝试使用vertical-align，但我似乎无法获得所需的结果：

\n

\r\n

\r\n

li {\n  vertical-align: middle;\n}\nli::marker {\n  color: grey;\n  font-size: 3.5rem;\n  vertical-align: middle;\n}

\r\n

<ul>\n  <li>Hello</li>\n  <li>Gromit</li>\n</ul>

\r\n

\r\n

\r\n

\n

我尝试使用position: absolute标记来移动它。我也尝试过transform: translateY(x);，但由于某种原因我根本无法移动标记\xe2\x80\xa6 另外，我讨厌x每次更改列表项的字体大小时都必须返回并摆弄或标记。

\n

这是我的尝试之一作为示例：

\n

\r\n

\r\n

li::marker {\n  color: grey;\n  font-size: 3.5rem;\n  transform: translateY(1000rem);\n}

\r\n

<ul>\n  <li>Hello</li>\n  <li>Gromit</li>\n</ul>

\r\n

\r\n

\r\n

\n

我见过很多类似的问题，但似乎没有一个提供解决方案：

\n

\n
• 不引入额外的 HTML 标记
\n
• 不会引入在列表项（或标记的字体大小）更改时需要更改的自定义值。
\n
• 不需要 JavaScript
\n

\n

话虽这么说，如果我错过了某些内容，请随时为我指出正确的方向，我会自己将其标记为重复项。

\n

Answer 1

坦率地说，我不会使用marker，因为你的样式选项被故意限制。改用before​

只有某些 CSS 属性可以在使用 ::marker 作为选择器的规则中使用：

所有字体属性

空白属性、颜色、文本组合直立、unicode-bidi 和方向属性 & 内容属性

li {
  display: flex;
  align-items: center;
  padding: .5rem;
  border: 1px solid red;
}

li::before {
  content: "";
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: grey;
  margin-right: .5rem;
}

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