Ответственность тега кругового диапазона

Question

Меня не устраивает текущая «форма» этого кругового пролета, поскольку информация, которую он несет, становится больше. Этот элемент всегда будет отображать только текстовый номер. Я видел несколько примеров c о создании отзывчивых кругов с помощью CSS, но пока у меня не было успеха при адаптации к моему коду. Я все еще думаю, что это можно просто решить с помощью css, но любая помощь приветствуется даже с JavaScript. Код ниже и результаты в прикрепленном изображении. Заранее спасибо!

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

Answer 1

Вот трюк с использованием radial-gradient. Вы делаете высоту элемента достаточно большой, а ширину в зависимости от содержимого. Использование circle closest-side всегда будет рисовать идеальный круг вокруг вашего текста:

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

Аналогичный вопрос: Как автоматически изменить размер круга в псевдоэлементе :: after?