如何增加OL中序列号的大小

Question

我想在不增加内容文本字体大小的情况下增加 OL 中的数字大小。

这有什么问题以及如何纠正它：

 <ol style="font-size:5em">
    <li style="font-size:1em">Hello </li>
</ol>

我想要的只是大数字 1，字体大小为 5em，内容 Hello 的文本大小为 1em。

我也只需要使用内联样式。

原文由 AgA 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

li 元素的编号根据 li 元素本身的 CSS 规则进行格式化；因此，要将数字设置为与文本不同的样式，您必须将文本本身包装到另一个元素中（在本例中为 span ）：

 <ol>
    <li><span>list element one</span></li>
    <li><span>list element two</span></li>
</ol>

CSS：

 li {
    list-style: decimal-leading-zero;
    font-size: 5em;
    margin: 0 0 0 2em;
}

li span {
    font-size: 0.25em;
}

 li {
  list-style: decimal-leading-zero;
  font-size: 5em;
  margin: 0 0 0 2em;
}
li span {
  font-size: 0.25em;
}

 <ol>
  <li><span>list element one</span>
  </li>
  <li><span>list element two</span>
  </li>
</ol>

JS 小提琴演示。

如果您能够牺牲某些无法处理生成的内容的旧浏览器，那么您可以改用：

 <ol>
    <li>list element one</li>
    <li>list element two</li>
</ol>

和：

 ol {
    counter-reset: listNumbering;
}

li {
    font-size: 1em;
    counter-increment: listNumbering;
}

li:before {
    content: counter(listNumbering,decimal-leading-zero) '.';
    font-size: 5em;
}

 ol {
  list-style-type: none;
  counter-reset: listNumbering;
}
li {
  font-size: 1em;
  counter-increment: listNumbering;
}
li:before {
  content: counter(listNumbering, decimal-leading-zero)'.';
  font-size: 5em;
}

 <ol>
  <li>list element one</li>
  <li>list element two</li>
</ol>

JS 小提琴演示。

重新审视这个答案，似乎 ::marker 伪元素开始被更广泛地采用（尽管在撰写本文时在 Chrome 和 Edge 80+ 中落后于标志）。这意味着在相对不久的将来，它可能是比上述更好的选择：

 li {
  /* something of a magic number to position the ::marker
     on the page: */
  margin-left: 2em;
}

/* the generated list-marker for the <li> element: */
li::marker {
  color: #f90;
  font-size: 5em;
}

请注意，下面的代码片段和上面的 CSS 需要兼容的浏览器，某些浏览器（例如 Chrome、Chromium 和 Edge）80 及更高版本需要启用 enable-experimental-web-platform-features 标志，而在 Firefox 68+ 中它应该管用）。

 li {
  margin-left: 2em;
}

::marker {
  color: #f90;
  font-size: 5em;
}

 <ol>
  <li>list element one</li>
  <li>list element two</li>
</ol>

JS 小提琴演示。

参考：

• counter() 。
• counter-increment 。
• counter-reset 。
• ::marker 伪元素（ 兼容性）。

原文由 David Thomas 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您可以使用 CSS 伪元素 ::marker 。 （下面的演示片段。）

 ol li::marker {
    font-size: 2em;
}

 ol li::marker {
  font-size: 2em;
  color: red;
}

 <ol>
  <li>Hello</li>
</ol>

原文由 Gangrel 发布，翻译遵循 CC BY-SA 4.0 许可协议