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

Question

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

这是什么问题以及如何纠正:

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

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

我还需要使用内联样式

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 Fiddle demo.

如果你能够牺牲某些不能处理生成内容的旧浏览器，那么你可以使用:

<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 Fiddle demo.

重新审视这个答案，似乎::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 Fiddle demo.

引用:

• counter() .
• counter-increment .
• counter-reset .
• ::marker伪元素(compatibility).

Answer 2

可以使用CSS伪元素::marker。

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

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

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

Answer 3

参见本教程。

ol {
  font: 5em;
}
ol p {
  font: 1em;
}

Answer 4

试试这样:

<ol>
    <li style="font-size: 3em"><span style="font-size: .5em">Hello</span></li>
</ol>