title: Absolute positioning :after and transforming it not aligning it in center
body: <p>Hey guys I had to create simple dots on a carousel like so:</p>
  
  <p><a href="https://i.stack.imgur.com/i0KLu.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/i0KLu.png" alt="enter image description here"></a></p>
  
  <p>And hence I used the following method:</p>
  
  <pre><code>.banner-nav-dots &gt; li &gt; a {
      position: relative;
  }
  
  .banner-nav-dots &gt; li.active &gt; a:after {
      content: '';
      background: #6e2c91;
      height: 5px;
      width: 5px;
      display: inline-block;
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%,-50%);
      -ms-transform: translate(-50%,-50%);
      -o-transform: translate(-50%,-50%);
      transform: translate(-50%,-50%);
      border-radius: 50%;
  }
  </code></pre>
  
  <p>Now that should have really centered the dot , but as can be seen on <strong><a href="http://codeandcode.co/demo/cryosave/html/V1-archive/" rel="nofollow noreferrer">THIS LINK</a></strong>, they are not exactly aligning in the center. Why? Why are they not aligning in the center? </p>
  
  <p><strong>Below is a MVCE</strong>:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.circle {
    position: relative;
    box-sizing: border-box;
    display: inline-block;
    border: 2px solid #6e2c91;
    border-radius: 50%;
    height: 15px;
    width: 15px;
  }
  .circle:after {
    position: absolute;
    content: '';
    display: inline-block;
    height: 5px;
    width: 5px;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    background: #6e2c91;
    transform: translate(-50%, -50%);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class='circle odd-numbered'&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I am more interested in the <strong><em>WHY</em></strong> part. Can somebody explain please? </p>
  
  <p>P.S. this absolute position method combined with transform has always worked for me, but just on this instance its caused this issue and I don't know why. Checked both in FF and Chrome. </p>