Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

List bullets like 1) 2) 3) [duplicate]

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 ?

like image 475
Milan Agheda Avatar asked Jun 09 '17 06:06

Milan Agheda


1 Answers

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>
like image 97
XYZ Avatar answered Oct 24 '22 23:10

XYZ