List bullets like 1) 2) 3)

Question

I need this types of bullets using CSS

1) Lorem ipsum dolor sit amet, consectetur adipisicing elit

2) Lorem ipsum dolor sit amet, consectetur adipisicing elit

3) Lorem ipsum dolor sit amet, consectetur adipisicing elit

Any one have a idea about this ?

score 23 · Accepted Answer · edited Jun 09 '17 at 06:28

Use CSS counters. The counter-increment CSS property is used to increase the value of CSS Counters by a given value. The counter's value can be reset using the counter-reset CSS property. Try this

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

ol li:before {
  content: counter(item) ")";
  padding-right: 5px;
  counter-increment: item
}

<ol>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
</ol>

List bullets like 1) 2) 3)

1 Answers1