Как спозиционировать элемент?

Question

[Hey One]

Всем привет! Нужно реализовать красный круг в центре которого будет находиться цифра. Получилось реализовать с помощью псевдокласса ::after, позиционирование с помощью absolute, но это не то, так как от изменения размера экрана красный круг начинает смещаться. Как еще можно спозиционировать красный круг, чтобы при изменении размера экрана он никуда не сдвигался?

Код:
https://jsfiddle.net/suva6ko5/

Answer 1

[dom1n1k]

Внимание, вопрос: зачем тут изгаляться с псевдоэлементами, если можно (и нужно!) скруглить и стилизовать сам элемент?

Answer 2

[uiworks]

https://jsfiddle.net/L0hnedgs/

<div class="circle">
  <span class="circle__number">
    1
  </span>
</div>

.circle {
  width: 100px;
  height: 100px;
  border-radius: 100px;
  background-color: red;
  display: flex;
  justify-content: center;
  align-items: center;
}

.circle__number {
  color: #fff;
  font-size: 70px;
  font-weight: bold;
}

Answer 3

[Hey One]

Всем огромное спасибо за ответы!
Вот как я решил:
https://jsfiddle.net/dL8t9evs/