title: How to increase a circle along with increasing the text inside the circle?
body: <p>I want to have text inside a circle. Is it possible to dynamically increase the size of the circle when the text increases?<br />
  <a href="https://jsfiddle.net/ThinkingStiff/mLW47" rel="nofollow noreferrer">This is an example</a>.<br />
  But the problem for me in this example is that only the width increases along with the text.</p>
  <p>e.g</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>.badge {
      background:             radial-gradient( 5px -9px, circle, white 8%, red 26px );
          background:    -moz-radial-gradient( 5px -9px, circle, white 8%, red 26px );
          background:     -ms-radial-gradient( 5px -9px, circle, white 8%, red 26px );
          background:      -o-radial-gradient( 5px -9px, circle, white 8%, red 26px );
          background: -webkit-radial-gradient( 5px -9px, circle, white 8%, red 26px );
      background-color: red;
      border: 2px solid white;
      border-radius: 12px; /* one half of ( (border * 2) + height + padding ) */
      box-shadow: 1px 1px 1px black;
      color: white;
      font: bold 15px/13px Helvetica, Verdana, Tahoma;
      height: 16px; 
      padding: 4px 3px 0 3px;
      text-align: center;
      min-width: 14px;
  }
  
  /* only needed for this sample */
  .badge {
      float: left;
      left: 25px;
      margin: 6px;
      position: relative;
      top: 25px; 
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="badge"&gt;1&lt;/div&gt;
  &lt;div class="badge"&gt;2&lt;/div&gt;
  &lt;div class="badge"&gt;3&lt;/div&gt;
  &lt;div class="badge"&gt;44&lt;/div&gt;
  &lt;div class="badge"&gt;55&lt;/div&gt;
  &lt;div class="badge"&gt;666&lt;/div&gt;
  &lt;div class="badge"&gt;777&lt;/div&gt;
  &lt;div class="badge"&gt;8888&lt;/div&gt;
  &lt;div class="badge"&gt;9999&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>