title: circle :after not perfectly round
body: <p>The circle I'm making is not totally round, the sides seems to be cropped, when it's bigger than 18px or 10px it looks perfect. the problem seems to be between 10px and 18px. why is that?</p>
  
  <p>Pug:</p>
  
  <pre><code>section.article-main-sidebar
    .article-main-sidebar-breadcrumb
      ul(class='breadcrumb-list  circular-shape_color-category_'+one_badge)
        li(class='breadcrumb-list-item1')
          a(class= 'breadcrumb-list-item1-shape1')
            span(class= 'text text1') text
  </code></pre>
  
  <p>SASS:</p>
  
  <pre><code>&amp;:hover{
              &amp;::after{
                content: '';
                width:12px;
                height: 12px;
                left:9px;
                top:4px;
                position: absolute;
                z-index: 20;
                border-radius: 50%;
                transform-origin: center;
                animation: grow 0.2s ease-in-out;
              } 
            }
  </code></pre>