0

How to make a list in HTML with exactly this kind of numbering, please?

(01) Itemitemitemitem
(02) Itemitemitemitem
(03) Itemitemitemitem
(04) Itemitemitemitem

But notice, please, that I am just complete amateur, so I need really simple and friendly explanation. Thanks.

Mara Galli
  • 3
  • 2
  • 1
    What do you mean by "numbering"? Also, we expect at least some code showing what you have attempted, even if it doesn't work. Please, take a look at [ask] and maybe [mcve] could be useful too – Calvin Nunes Feb 05 '20 at 21:29
  • 1
    would : `ol{list-style:decimal-leading-zero}`be enough ? please add your HTML code and your css attempts – G-Cyrillus Feb 05 '20 at 21:34
  • You should add your code to the question, and the most usefull, so you get efficeint help , no one has to guess if willing to help, you get no downvote and nor a closed question :) Welcome on SO. – G-Cyrillus Feb 05 '20 at 21:52
  • [Welcome to StackOverflow](http://StackOverflow.com/tour) - Please read our [ask] page and [edit] your question to improve it. Good questions tend to receive quicker, better answers from the community. – blurfus Feb 05 '20 at 21:54

4 Answers4

1

you just need to add the list-style-type:

ol { list-style-type: none;counter-reset: item;padding:0 }
li { counter-increment: item; }
li:before { content: " ("counter(item,decimal-leading-zero)") "; }
<ol>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
    </ol>
DCR
  • 10,658
  • 7
  • 38
  • 86
1

You may use a counter if ( & ) are also required to be seen:

The counter() CSS function returns a string representing the current value of the named counter, if there is one. It is generally used with pseudo-elements, but can be used, theoretically, anywhere a value is supported.

ol {
  list-style-type: none;/* remove the marker */
  /* mind also other list style */
  counter-reset: count;
}

li {
  counter-increment: count;
}

li::before {
  content: "(" counter(count, decimal-leading-zero) ") ";
}
<ol>
  <li> Item</li>
  <li> Item</li>
  <li> Item</li>
  <li> Item</li>
  <li> Item</li>
  <li> Item</li>
</ol>
G-Cyrillus
  • 85,910
  • 13
  • 85
  • 110
1

You need to use disable default list-style-type and use a custom list-style-type using the counter property and pseudo-element ::before https://www.w3schools.com/css/css_counters.asp.

With this property, you can use it with something other than 

ol {
  list-style-type: none;
  counter-reset: step;
}

li {
  counter-increment: step;
}

li:before {
  content: "("counter(step, decimal-leading-zero)") ";
}
<ol>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ol>
Aubry BOUCARD
  • 11
  • 2
0

In HTML you can use the <ol> tag. This stands for ordered list and will number your list items for you.

The list items will use the <li> tag. This stands for list item.

For example:

    <ol>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
    </ol>
Kes Walker
  • 381
  • 5
  • 15