How to increase size of serial number in OL
You can use the CSS pseudo-element ::marker. (Demo snippet below.)
ol li::marker {
font-size: 2em;
}
ol li::marker {
font-size: 2em;
color: red;
}
<ol>
<li>Hello</li>
</ol>
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).