CODEWITHSUNDEEP
cssbadge
Miomir Dancevic
Miomir Dancevic

Reputation: 6852

CSS Badge width and height

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/

Upvotes: 3

Views: 8894

Answers (2)

TheYaXxE
TheYaXxE

Reputation: 4294

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

Upvotes: 4

TheFrozenOne
TheFrozenOne

Reputation: 1715

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

width:auto;
padding: 2px;

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

Upvotes: 1

Related Questions