How to make a list with parentheses in HTML

I found a way to make a list with parentheses in HTML.

CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/* CSS for List with Parentheses
 * Designed by Iseulbee
 */
ol.parenthesis {
    counter-reset: list-in-thm;
    margin-left: 0;
    padding-left: 0;
}
ol.parenthesis li {
    list-style: none;
    position: relative;
    padding-left: 0;
    margin-left: 2.2em;
}
ol.parenthesis li:before {
    content: "(" counter(list-in-thm) ")";
    counter-increment: list-in-thm;
    position: absolute;
    width: 3.0em;
    left: -3.5em;
    text-align: right;
}

HTML:

1
2
3
4
5
<ol class="parenthesis">
<li>The first element.</li>
<li>The second element.</li>
<li>The third element.</li>
</ol>

Result:

  1. The first element.
  2. The second element.
  3. The third element.

As an application, you can replace the 16th line in CSS with one of these:

16
content: "[" counter(list-in-thm) "]";
16
content: "(" counter(list-in-thm, lower-latin) ")";
16
content: "(" counter(list-in-thm, lower-roman) ")";