HTML numbering with brackets

Question

Please how to set up numbering in this format:

1) number 1
2) number 2
3) ...

in html?

I only found a way to get this format:

1. number 1
2. number 2
3. ...

No bracket after the number.

Also, is it possible to set up start, kind of numbering, but no other format.

I think that you don't understand me right. I need something like this. 1) item 2) item Not only 1 item 2 item — , Mar 20 '14 at 11:10
have you seen this ? http://stackoverflow.com/questions/1632005/ordered-list-html-lower-alpha-with-right-parentheses — anurupr, Mar 20 '14 at 11:10
This is a nice post on css lists: http://alistapart.com/article/taminglists/ — Toon Krijthe, Mar 20 '14 at 11:11

score 25 · Answer 1 · edited Nov 11 '17 at 10:30

25

You can achieve this with an ordered list <ol>:

ol {
    counter-reset: list;
}
ol > li {
    list-style: none;
}
ol > li:before {
    content: counter(list) ") ";
    counter-increment: list;
}

<ol>
    <li>some text</li>
    <li>some more text</li>
    <li>some further text</li>
</ol>

Sample JSFiddle

Referenced from: Ordered list (HTML) lower-alpha with right parentheses?

edited Nov 11 '17 at 10:30

Ivar

6,138
12
49
61

answered Mar 20 '14 at 11:13

Tanner

22,205
9
65
83

score 9 · Answer 2 · answered Mar 10 '20 at 13:03

I know this is a little old now, but none of these solutions take into account double-digits or triple-digits or even wrapping lines of text.

*, ::after, ::before {
    box-sizing: border-box;
}

ol {
    counter-reset: list;
}

ol > li {
    list-style: none;
    position: relative;
}

ol > li:before {
    content: counter(list) ")";
    counter-increment: list;
    left: -40px;
    padding-right: 10px;
    position: absolute;
    text-align: right;
    width: 40px;
}

<ol>
    <li>Line 1</li>
    <li>Line 2 is long. Line 2 is long. Line 2 is long. Line 2 is long. Line 2 is long. Line 2 is long. Line 2 is long. Line 2 is long. Line 2 is long. Line 2 is long. Line 2 is long. Line 2 is long. Line 2 is long. Line 2 is long. Line 2 is long. Line 2 is long. </li>
    <li>Line 3 is not so long.</li>
    <li>Line 4</li>
    <li>Line 5 is long. Line 5 is long. Line 5 is long. Line 5 is long. Line 5 is long. Line 5 is long. Line 5 is long. Line 5 is long. Line 5 is long. Line 5 is long. Line 5 is long. Line 5 is long. Line 5 is long. Line 5 is long. Line 5 is long. Line 5 is long. </li>
    <li>Line 6 is not so long.</li>
    <li>Line 7</li>
    <li>Line 8 is long. Line 8 is long. Line 8 is long. Line 8 is long. Line 8 is long. Line 8 is long. Line 8 is long. Line 8 is long. </li>
    <li>Line 9 is not so long.</li>
    <li>Line 10</li>
    <li>Line 11 is long. Line 11 is long. Line 11 is long. Line 11 is long. Line 11 is long. Line 11 is long. Line 11 is long. Line 11 is long. Line 11 is long. Line 11 is long. Line 11 is long. Line 11 is long. Line 11 is long. Line 11 is long. Line 11 is long. Line 11 is long. </li>
    <li>Line 12 is not so long.</li>
</ol>

score 5 · Answer 3 · answered Dec 09 '20 at 02:20

5

<style>
ol {
columns:2;
}
ol > li::marker {
content:counter(list-item) ")\2003";
}
</style>

<ol>
<li>Hello</li>
<li>Darkness</li>
<li>My</li>
<li>Old</li>
<li>Friend</li>
<li>I<br>Have</li>
<li>Come</li>
<li>To</li>
<li>Talk</li>
<li>To</li>
<li>You</li>
<li>Again</li>
</ol>

Result:

enter image description here

answered Dec 09 '20 at 02:20

user260396

11
1
2

Doesn't currently work on Safari. [pen](https://codepen.io/kentr/pen/BaLqXQE), [::marker pseudo-element on caniuse](https://caniuse.com/?search=marker) – kentr Jan 13 '21 at 15:53

score 4 · Answer 4 · answered Mar 20 '14 at 11:07

4

Use an ordered list:

e.g.

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

A more detailed explanation is available here: http://www.w3schools.com/html/html_lists.asp

If you're particularly interested in the parentheses, you can do it in css with something like this:

ol {list-style-type: none;}
li:before {content: counter(section, lower-alpha) ") ";}
li { counter-increment: section;}

Note however that this may not work perfectly in IE7 or below.

answered Mar 20 '14 at 11:07

Steve

329
1
9

3

As I understand the question, he wants to format his list in a different way. – Toon Krijthe Mar 20 '14 at 11:09
I think that you don't understand me right. I need something like this. 1) item 2) item Not only 1 item 2 item – Mar 20 '14 at 11:10
Ah, I understand what you're looking for now. I've updated my answer accordingly. – Steve Mar 20 '14 at 11:11

score 0 · Answer 5 · answered Mar 20 '14 at 11:31

0

About the closest you can come in HTML without using JavaScript (or other scripting language) is to use the CSS :before pseudoelement.

In internal styles:

<style>
li:before {
content: ") ";
}
</style>


<ol>
<li>First List Item</li>
</ol>

or if just wanting to target a certain class of <li>

li.parenthesis:before

then in html

<li class="parenthesis">First List Item</li>

answered Mar 20 '14 at 11:31

user1560289

29
2
6

This will leave numbers with a dot before the parenthesis like following, 1.) , 2.) – Nilaksha Perera Jul 02 '19 at 12:44

score 0 · Answer 6 · answered Aug 16 '18 at 18:51

<ul class="counter-increment">
 <li>First</li>
  <li>Second</li>
</ul>

ul.counter-increment li {
counter-increment: section;
display: table-row;
}

ul.counter-increment li::before {
content: "(" counter(section) ") ";
display: table-cell;
padding-right: 5px;
text-align: left;
}

HTML numbering with brackets

6 Answers6

Linked