CSS Badge width and height

Question

I am creating some css badge. The problem is when number is 100 and bigger the last char get out of the badge?

Is it possible to create badge that will be bigger if number is bigger than 99?

Here is my code

CSS

.badge[data-badge]:after {
   content:attr(data-badge);
   font-size:.7em;
   background:rgba(48, 174, 227, 1);
   color:white;
   width:18px;
   height:18px;
   text-align:center;
   line-height:18px;
   border-radius:50%;
   box-shadow:0 0 1px #333;
   margin-top: 7px;
   float:left;
}

HTML

<span class='badge' data-badge='27'></span>

Here is working fiddle https://jsfiddle.net/kx5kow5m/

Answer 1

Try to set the width: auto and add a min-width: 18px.

Also a padding would be good to add:

width: auto;
min-width: 18px;
paddding: 4px;

Live Fiddle

Answer 2

Set width: auto and add a padding if you need it.

width:auto;
padding: 2px;

Example: https://jsfiddle.net/kx5kow5m/2/