UL List items with styled decimal numbers [duplicate]

Question

I need to create a set of list items where I need to style the list item numbers (decimals) with a border-radius and a background color.

Here is the snapshot of how I want my list items to look like.

I have tried to put a border radius, background on the li, but I was not able to get the output that I am lookin for.

Here is a WORKING LINK of what I have tried so far. I removed the border-radius, background, etc. as it was not displaying properly.

The HTML:

<ul>
    <li>Text Character</li>
    <li>Text Character</li>
    <li>Text Character</li>
    <li>Text Character</li>
    <li>Text Character</li>
</ul>

The CSS:

li{list-style-type:decimal;}

I would like solutions for the above provided the below..

• It should not be a sprite/background image solution
• I am only looking for a solution where I have to use a border-radius and background-color on the list items, which I tried, but could not work the way I want in my reference Image.

Awaiting Solutions.

Answer 1

Here's a little trick:

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;
        background: blue;
        color: white;
        display: inline-block;
        border-radius: 50%;
        margin: 0 5px ;
        padding: 0 5px;
    
    }

<ol>
  <li>Item1</li>
  <li>Item2</li>
  <li>Item3</li>
  <li>Item4</li>
</ol>