How to modify the style in list(ordered list and unordered list) in HTML?

Question

How can I change the style in list?

1. First
2. Second
3. Third

I want my listing to look something like

1) First
2) Second
3) Third

Now the question is how to change dot . to parenthesis ) or something we like??

I am beginner to HTML so the question seem a quite awkward. Please help me with this question.

This thread might be useful: http://stackoverflow.com/questions/10877/how-can-you-customize-the-numbers-in-an-ordered-list — Balazs Koszegi, Sep 05 '13 at 06:35
If you check my [this answer](http://stackoverflow.com/questions/18629225/how-to-modify-the-style-in-listordered-list-and-unordered-list-in-html/#18629456), you can see that I have used the CSS Content pseudo property to add the parenthesis. What this does is that it adds any content either after or before the element. You can have a look at it. — Nitesh, Sep 05 '13 at 09:22

score 5 · Accepted Answer · answered Sep 05 '13 at 06:42

Here you go.

WORKING DEMO

The HTML:

<ul style="list-style-type:decimal;">
   <li>First</li>
   <li>Second</li>
   <li>Third</li>
</ul>

The CSS:

li{
   position: relative;
   }
li:before{
   position: absolute;
   left: -13px;
   content: ')';
   background:white;}

Hope this helps.

Debashrita · Answer 2 · 2013-09-05T06:55:45.060

4

We can get it by doing as follows

<ol>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ol>

and then adding style

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

edited Sep 05 '13 at 06:55

answered Sep 05 '13 at 06:44

Debashrita

940
1
8
20

score 2 · Answer 3 · answered Sep 05 '13 at 06:56

try this code

CSS

ol{margin:0; padding:0; text-decoration:none;}
ol {list-style-type: none;}
li:before {content: "" counter(section, decimal) ") ";}
li { counter-increment: section;}

li{margin:0; padding:0; text-decoration:none; color:#ff9900; font-size:14px; font-family:arial;}

HTML

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

I Hope this is helps to you.

See Demo

score 2 · Answer 4 · answered Sep 05 '13 at 07:35

You can try this with some css here content: will add item to your listing number, you can also change ) with other symbols

<html>
<head>
<title>Title Here</title>
</head>

<body>
<style type="text/css">
ol {
counter-reset: item;
margin-left: 0;
padding-left: 0;
}
li {
display: block;
margin-bottom: .5em;
margin-left: 2em;
}
li:before {
display: inline-block;
content: counter(item) ") ";
counter-increment: item;
width: 2em;
margin-left: -2em;
}
</style>
<ol>
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
</ol>
</body>   
</html>

How to modify the style in list(ordered list and unordered list) in HTML?

4 Answers4