How to increase size of serial number in OL

Question

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:

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

All I want is big number 1 with font-size of 5em with 1em text size of the content Hello.

Also I need to use only inline style.

Answer 1

The numbers of the li elements are formatted according to the CSS rules for the li elements themselves; therefore to style the numbers differently to the text you have to wrap the text itself into another element (in this case a 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.

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).