title: customize ordered list-style
body: <p>Hey there I am trying to modify the ol list style like in that picture another website is allready dooing.
  <a href="https://i.stack.imgur.com/BQok4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BQok4.png" alt="enter image description here"></a></p>
  
  <p>But with another CSS Image instead of the circle like the form (without text) in that picture
  <a href="https://i.stack.imgur.com/qWoRZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qWoRZ.png" alt="enter image description here"></a></p>
  
  <p>I tried the following code to rebuild what the other website is dooing, but I have no idea how to change the blue circle into a that green symbol. Can you help me?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code> .blog-blau-liste {
      position: relative;
      margin: 0.8em 0px 0px;
      list-style: outside none none;
      counter-reset: big-numba;
      padding-left: 0px;
  }
  
  .blog-blau-liste-item {
      position: relative;
      margin: 0.8em 0px 0px 1.9em;
      list-style: outside none none;
  }
  
  .blog-blau-liste-item::before {
      content: counter(big-numba, decimal);
      counter-increment: big-numba;
      position: absolute;
      top: -2px;
      font-size: 19px;
      left: -1.9em;
      box-sizing: border-box;
      width: 1.5em;
      height: 1.5em;
      line-height: 1.5;
      color: #FFF;
      background: #009DD9 none repeat scroll 0% 0%;
      font-weight: 600;
      text-align: center;
      border-radius: 50%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;ol class="blog-blau-liste"&gt;
   &lt;li class="blog-blau-liste-item"&gt;Punkt Nummer 1&lt;/li&gt;
   &lt;li class="blog-blau-liste-item"&gt;Punkt Nummer 2&lt;/li&gt;
   &lt;li class="blog-blau-liste-item"&gt;Punkt Nummer 3&lt;/li&gt;&lt;/ol&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Is there a way to do so and build this green logo (only this kind of circle without text and white line) with css?</p>
  
  <p>I found this code but it is not rounded and I dont know how to integrate that.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#burst-8 {
      background: red;
      width: 80px;
      height: 80px;
      position: relative;
      text-align: center;
      -webkit-transform: rotate(20deg);
         -moz-transform: rotate(20deg);
          -ms-transform: rotate(20deg);
           -o-transform: rotate(20eg);
  }
  #burst-8:before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      height: 80px;
      width: 80px;
      background: red;
      -webkit-transform: rotate(135deg);
         -moz-transform: rotate(135deg);
          -ms-transform: rotate(135deg);
           -o-transform: rotate(135deg);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="burst-8"&gt;1&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>