I want to display the notification count inside a circle but I don't want it to have a fixed width so the circle can expand when there is a bigger number/text inside the circle.
.circle {
height: 20px;
width: 20px;
line-height: 20px;
border-radius: 50%;
background-color: red;
color: white;
text-align: center;
}
<div class="circle">5</div>
<br>
<div class="circle">102</div>
See this CSS only solution. Set the same value of min-width
and min-height
for 1 digit number. Use a pseudo element for vertical alignment and to maintain the square shape. With border-radius
applies to the container for the circle.
.circle {
display: inline-block;
border-radius: 50%;
min-width: 20px;
min-height: 20px;
padding: 5px;
background: red;
color: white;
text-align: center;
line-height: 1;
box-sizing: content-box;
white-space: nowrap;
}
.circle:before {
content: "";
display: inline-block;
vertical-align: middle;
padding-top: 100%;
height: 0;
}
.circle span {
display: inline-block;
vertical-align: middle;
}
<div class="circle"><span>8</span></div>
<div class="circle"><span>64</span></div>
<div class="circle"><span>512</span></div>
<div class="circle"><span>4096</span></div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With