Creating numbered lists with coloured backgrounds behind numbers using CSS

Use the CSS Counter, as follows:

ol {  
  counter-reset: section;
  list-style-type: none;
}
    ol li {
        clear: both;
    }
    ol li::before {
        display: block; width: 40px; height: 40px; float: left;
        background: #000; 
        color: #fff; text-align: center; line-height: 40px;
        border-radius: 20px;
        margin-right: 15px;
          counter-increment: section;
          content: counters(section,".") " ";
}

Source