how to implement list bullets in CSS

Question

I have the following bullets for list items. How can I implement these bullets in CSS?

See image

Answer 1

From this answer, I edited it so it's what you wanted

CSS

body {
   counter-reset: item;
 }
 ol {
   list-style: none;
 }
 li {
   counter-increment: item;
   margin-bottom: 5px;
 }
 li:before {
   margin-right: 10px;
   content: counter(item);
   border-radius: 100%;
   border:2px solid #29465F;
   color:#29465F;
   font-weight:700;
   width: 1.2em;
   text-align: center;
   display: inline-block;
 }

HTML

<ol>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ol>

Here's a fiddle

Answer 2

https://jsfiddle.net/RajReddy/k36qjnq4/ Here is a working fiddle.

and the css styles are

 ol {
   list-style: none;
 }
 li {
    counter-increment: item;  
    margin-bottom: 5px;
 }
 li:before {
   margin-right: 5px;  
   content: counter(item);
   border-radius: 100%;
   border:1px solid; 
   width: 20px;
   text-align: center;
   display: inline-block;
 }

Answer 3

You can make a circle with a number in it using assuming you are in a loop and have access to the index of the array:

<li>
    <span class="list-item-number">{{i+1}}</span>
    <span class="lite-item-value">{{item.name}}</li>
</li>

.list-item-number {
    border-radius: 100rem;
    width: 1rem;
    border: .2rem solid blue;
    background: white;
    text-align: center;
}