How to Make Numbers in an Ordered List Bold

Is there a way to make numbers in an ordered list bold?

A new ::marker pseudo-element selector has been added to CSS Pseudo-Elements Level 4, which makes styling list item numbers in bold as simple as

ol > li::marker {
  font-weight: bold;
}

It is currently supported by Firefox 68+, Chrome/Edge 86+, and Safari 11.1+.

Make ABC Ordered List Items Have Bold Style

a bit of a cheat, but it works:

HTML:

<ol type="A" style="font-weight: bold;">
  <li><span>Text</span></li>
  <li><span>More text</span></li>
</ol>

CSS:

li span { font-weight: normal; }

How to style the number on a html list?

It can be done using CSS3 but not 100% cross browser (namely IE7). using the pseudo :before element and counter-reset and counter-increment you can hide the list-style and create your own.

here is an article outlining how: Styling ordered list numbers

and here is a demo built from that article.

Also in case of the dreaded link rot - here is the main CSS code required (this can be applied to any ordered list)

ol {
    counter-reset:li; /* Initiate a counter */
    margin-left:0; /* Remove the default left margin */
    padding-left:0; /* Remove the default left padding */
}
ol > li {
    position:relative; /* Create a positioning context */
    margin:0 0 6px 2em; /* Give each list item a left margin to make room for the numbers */
    padding:4px 8px; /* Add some spacing around the content */
    list-style:none; /* Disable the normal item numbering */
    border-top:2px solid #666;
    background:#f6f6f6;
}
ol > li:before {
    content:counter(li); /* Use the counter as content */
    counter-increment:li; /* Increment the counter by 1 */
    /* Position and style the number */
    position:absolute;
    top:-2px;
    left:-2em;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    width:2em;
    /* Some space between the number and the content in browsers that support
       generated content but not positioning it (Camino 2 is one example) */
    margin-right:8px;
    padding:4px;
    border-top:2px solid #666;
    color:#fff;
    background:#666;
    font-weight:bold;
    font-family:"Helvetica Neue", Arial, sans-serif;
    text-align:center;
}
li ol,
li ul {margin-top:6px;}
ol ol li:last-child {margin-bottom:0;}

This code will produce a custom ordered list; albeit not the style you asked for. I will leave the customization work upto you :) cheers

How to set bold only to first level list elements?

You can set bold on first level <ol>, and reset it on the second level <ol>s.

.container ol {  font-weight: bold;}.container ol ol {  font-weight: normal;}

<div class="container">  <ol type="I">    <li>      Title 1      <ol>        <li>sub 1</li>        <li>sub 2</li>      </ol>    </li>    <li>      Title 2      <ol>        <li>sub 1</li>        <li>sub 2</li>      </ol>    </li>  </ol></div>

Can you style ordered list numbers?

You can do this using CSS counters, in conjunction with the :before pseudo element:

 ol {   list-style: none;   counter-reset: item; } li {   counter-increment: item;   margin-bottom: 5px; } li:before {   margin-right: 10px;   content: counter(item);   background: lightblue;   border-radius: 100%;   color: white;   width: 1.2em;   text-align: center;   display: inline-block; }

<ol>  <li>item</li>  <li>item</li>  <li>item</li>  <li>item</li></ol>

How to do css style for ordered list numbers?

custom-counter is an invalid selector and even if it was valid, it would be pointing to nothing. Just remove that whole ruleset and then add list-style-type: none; to the <ol> as in:

ol {list-style-type: none;}

Assign position:relative to all <li> and position:absolute to each li::before in order to have granular control over all bullet distances from text.

li {
  position: relative;
...
}

li::before {
...
  position: absolute;
  top: -1px;
  /* Adjust < -number | number+ > */
  left: -32px;
...

:root {  font: 400 16px/1.25 Verdana}
ol {  list-style-type: none;}
ol li {  counter-increment: step-counter;  position: relative;  margin: 10px 0 0 0;}
ol li::before {  content: counter(step-counter);  display: block;  position: absolute;  top: -1px;  /* Adjust < -number | number+ > */  left: -32px;  width: 1.25rem;  height: 1.25rem;  line-height: 1.25rem;  background-color: rgb(0, 200, 200);  color: white;  font-weight: bold;  font-size: 0.8rem;  text-align: center;  border-radius: 15px;}

<ol>  <li>This is the first item</li>  <li>This is the second item</li>  <li>This is the third item</li>  <li>This is the fourth item</li>  <li>This is the fifth item</li>  <li>This is the sixth item</li></ol>

Can I style numbering an ordered list that has a start attribute value?

You can simulate this using CSS variable that you set instead of start and use it to reset the counter. For semantic purpose you can also keep start attribute.

.custom {  margin: 0;  padding: 0;  list-style-type: none;  counter-reset: step-counter calc(var(--start) - 1);}
.custom li {  counter-increment: step-counter;  margin-bottom: 10px;}
.custom li::before {  content: counter(step-counter);  margin-right: 5px;  font-size: 80%;  background-color: rgb(0, 200, 200);  color: white;  font-weight: bold;  padding: 3px 8px;  border-radius: 3px;}

<ol style="--start:6" start="6" class="custom">  <li>This is the sixth item</li>  <li>This is the seventh item</li>  <li>This is the eighth item</li>  <li>This is the ninth item</li>  <li>This is the tenth item</li></ol>

How to make the numbering bold in List in iText7?

This is a Java example to achieve the desired result and I hope you can easily adapt it to your programming language

try (PdfDocument pdfDocument = new PdfDocument(new PdfWriter(outFileName))) {
            try (Document document = new Document(pdfDocument)) {
                List header = new List(ListNumberingType.DECIMAL);

                for (int i = 0; i < 10; i++) {
                    ListItem li = new ListItem();
                    ListItem li2 = new ListItem();

                    li.add(new Paragraph("TableName").setFontSize(13)
                                    .setFont(PdfFontFactory.createFont(StandardFonts.HELVETICA_BOLD)))
                            .setFont(PdfFontFactory.createFont(StandardFonts.HELVETICA_BOLD));

                    li2.add(new Paragraph("Hello")).setFontSize(13)
                            .setFont(PdfFontFactory.createFont(StandardFonts.HELVETICA));

                    li.add(li2);

                    header.add(li);
                }
                document.add(header);
            }
        }

My output result

Sample Image