How To Increase Size Of Serial Number In Ol

I want to increase the size of the number in OL without increasing the font size of the text of the content. What is wrong with this and how to correct it:

Copy

CSS:

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

lispan {
    font-size: 0.25em;
}

li {
  list-style: decimal-leading-zero;
  font-size: 5em;
  margin: 0002em;
}
lispan {
  font-size: 0.25em;
}

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

JS Fiddle demo.

If you're able to sacrifice certain older browsers that can't handle generated content, then you could use, instead:

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

and:

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.

Revisiting this answer, it seems that the ::marker pseudo-element is beginning to be more widely adopted (albeit behind flags in Chrome and Edge 80+, as of writing). This means it may be a better option than the above in the relatively near future:

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;
}

Please note that the below snippet – and the above CSS – requires a compatible browser, some browsers such as Chrome, Chromium and Edge in versions 80 and above require that enable-experimental-web-platform-features flag be enabled, whereas in Firefox 68+ it should work).

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.

References:

• counter().
• counter-increment.
• counter-reset.
• ::marker pseudo-element (compatibility).

Solution 2:

See this tutorial.

ol {
  font: 5em;
}

olp {
  font: 1em;
}

Solution 3:

Try something like this:

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

Solution 4:

You can use the CSS pseudo-element ::marker.

OLLI::marker {
    font-size: 2em;
}

OLLI::marker {
    font-size: 2em;
}

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