Responsiviness of circular span tag

Question

I am not satisfied with the current 'shape' of this circular span as the information it carries goes bigger. This element will only and always display a text number, I've seen a few topic about making responsive circles with CSS but I had no sucess while adapting to my code so far. I still think this can be simply solved with css, but any help is appreciated even with JavaScript. Code below and results in attached image.Thanks in advance !

.notification {
  background-color: #db0100;
  color: white;
  text-decoration: none;
  padding: 15px 26px;
  position: relative;
  display: inline-block;
  border-radius: 2px;
  border: 2px #db0100 solid;
  text-decoration: none;
}

.notification+.notification {
  margin-left: 20px
}

.notification:hover {
  background-color: #fa5554;
  color: #fff;
}

.notification .badge {
  position: absolute;
  top: -10px;
  right: -10px;
  padding: 8px;
  border-radius: 50%;
  background-color: yellow;
  border: 2px #db0100 solid;
  color: #db0100;
}

<a href="#" class="notification"><span>Random Text</span><span class="badge">1</span></a>
<a href="#" class="notification"><span>Random Text</span><span class="badge">10</span></a>
<a href="#" class="notification"><span>Random Text</span><span class="badge">100</span></a>
<a href="#" class="notification"><span>Random Text</span><span class="badge">1000</span></a>

How do you want the badges to be "responsive"? Grow in size? always stay a true circle? resize the text to fit? grow into a "pill" shape? — chazsolo, Jun 18 '20 at 19:43
well there are some problems , one of which is the fact that if you want to maintain the circular appearance of the badge element the width and the height of the badge must be the same so for longer numbers the size of the badge will increase till it ends up covering the whole element unless you're doing some rounding to a format like `1k, 1m` etc, how ever if you don't do that then you'll have to apply a negative margin or position (top, left, right, bottom) to compensate for that fact — Dev Man, Jun 18 '20 at 19:48
@chazsolo stay a true circle would be the case since as the number gets bigger the circle gets oval, but is 'staying a true circle' a good approach regardless resizing the text? — Rezik, Jun 18 '20 at 20:03

Temani Afif · Answer 1 · 2020-06-18T19:55:14.787

Here is a trick using radial-gradient. You make the height of the element big enough and the width based on the content. The use of circle closest-side will always draw a perfect circle around your text:

.notification {
  background-color: #db0100;
  color: white;
  text-decoration: none;
  padding: 15px 26px;
  position: relative;
  display: inline-block;
  border-radius: 2px;
  border: 2px #db0100 solid;
  text-decoration: none;
  margin-top:20px;
}

.notification+.notification {
  margin-left: 20px
}

.notification:hover {
  background-color: #fa5554;
  color: #fff;
}

.notification .badge {
  position: absolute;
  height:80px; /*make this very big, always bigger than the width */
  top:5px;
  right:5px;
  /* center the content*/
  display:flex;
  align-items:center;
  /**/
  transform:translate(50%,-50%);
  padding: 8px;
  border-radius: 50%;
  background: radial-gradient(circle closest-side, 
      yellow calc(100% - 2px),#db0100 calc(100% - 1px) 99%,transparent 100%);
  color: #db0100;
}

<a href="#" class="notification"><span>Random Text</span><span class="badge">1</span></a>
<a href="#" class="notification"><span>Random Text</span><span class="badge">10</span></a>
<a href="#" class="notification"><span>Random Text</span><span class="badge">100</span></a>
<a href="#" class="notification"><span>Random Text</span><span class="badge">1000</span></a>

Similar question: How to auto resize a circle in an ::after pseudo element?

For my application specifically I could have larger numbers... So I would like to keep the circle in a pattern, as it had a "fixed" shape otherwise I'm going to have real large circle. I guess this would imply in resizing the text in this case? Do you have a suggestion? — Rezik, Jun 19 '20 at 16:18
@Rezik you can always define a max-width. In all the cases, if the text is very large, the circle should be as large as the text even if you will consider a "fixed" shape — Temani Afif, Jun 19 '20 at 18:35

Responsiviness of circular span tag

1 Answers1