Можно ли только на css приравнять height к width в зависимости от содержимого?

Question

[lagudal]

Ниже пример - вывод простого счетчика. Если, например, число задать четырехзначным, то оно выходит за пределы круга. Если задавать большую ширину для элемента, то некрасиво будут выводиться однозначные числа.
Хотелось бы, чтобы ширина и высота были бы одинаковыми (чтобы круг был ровным) но при этом зависили от ширины того что внутри.
Пока есть решение только с js - это задать для ширины значение например fit-content и через js подгонять высоту.
Просто может есть трюк какой на чистом css?

Comments

[iBird Rose]

к примеру width: fit-content;. и min-width не забудь

Answer 1

[Антон Антон]

https://jsfiddle.net/xcrbvkdf/2/

Answer 2

[Даниил]

Гм, а просто задать внутренние отступы? Соответственно, нет фиксированный ширины и высоты, и хоть 20 значное число.

Comments

[Антон Литвиненко]

а вы попробовали? высота тоже становиться равной ширине? Ему ж надо по итогу получать круг

[Даниил]

Антон Литвиненко, задать border: 50%

[zhrjnnrdzjj]

div'у дай:
border-radius: 50%;
width: max-content;

спан'у дай:
padding: calc(50% - 0.5em) 0.3em;
line-height: 2em;