¿Cómo aumentar un círculo junto con aumentar el texto dentro del círculo?

Question

Quiero tener texto dentro de un círculo. ¿Es posible aumentar dinámicamente el tamaño del círculo cuando aumenta el texto?
This is an example.
Pero el problema para mí en este ejemplo es que solo el ancho aumenta junto con el texto.

por ejemplo

.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; 
 
}

<div class="badge">1</div> 
 
<div class="badge">2</div> 
 
<div class="badge">3</div> 
 
<div class="badge">44</div> 
 
<div class="badge">55</div> 
 
<div class="badge">666</div> 
 
<div class="badge">777</div> 
 
<div class="badge">8888</div> 
 
<div class="badge">9999</div>

Answer 1

Creo que es necesario utilizar javascript para ajustar la altura para que coincida con el ancho; también debe usar 50% para el radio del borde. He modificado your example.

$(document).ready(function(){$('.badge').each(function(){ 
 
    $(this).height($(this).width()); 
 
    $(this).css('line-height', $(this).height()+'px'); 
 
})});

.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: 50%; /* 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: 3px; 
 
    text-align: center; 
 
    min-width: 16px; 
 
} 
 

 
/* only needed for this sample */ 
 
.badge { 
 
    float: left; 
 
    left: 25px; 
 
    margin: 6px; 
 
    position: relative; 
 
    top: 25px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="badge">1</div> 
 
<div class="badge">2</div> 
 
<div class="badge">3</div> 
 
<div class="badge">44</div> 
 
<div class="badge">55</div> 
 
<div class="badge">666</div> 
 
<div class="badge">777</div> 
 
<div class="badge">8888</div> 
 
<div class="badge">9999</div>