title: How to make a bundle of circle on the left side of the text using css
body: <p>Is it possible to make this using css only:</p>
  
  <p><a href="https://i.stack.imgur.com/bXzON.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bXzON.jpg" alt="enter image description here"></a></p>
  
  <p>Sorry for my bad english. Please help, I dont have any idea to do this.</p>
  
  <p>I can only make 2 circles on the left side of the text using this code:</p>
  
  <pre><code>.header3-title{
      padding-bottom: 5px;
      margin-bottom: 5px;
      font-size: 12px;
      font-weight: bold;
      position:relative;
      padding-left:17px;
  }
  
  .header3-title:before{
      content:''; 
      border-radius:30px;
      -webkit-border-radius:30px;
      -moz-border-radius:30px; 
      height:8px; 
      width:8px; 
      display:block; 
      position:absolute; 
      top:5px; 
      left:6px; 
      background-color:#ff7819;
      z-index: 1;
  }
  
  .header3-title:after{
      content:''; 
      border-radius:30px;
      -webkit-border-radius:30px;
      -moz-border-radius:30px; 
      height:8px; 
      width:8px; 
      display:block; 
      position:absolute; 
      top:0px; 
      left:2px; 
      background-color:#0a78dc;
  }
  </code></pre>