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

Question

I\'m trying to create a circle as an ::after pseudo element, which resizes automatically depending on its content.

Answer 1

Don't put actual content in the pseudo-element especially as this is actually "content" rather than styling, rather use the pseudo-element to create a background circle using the padding/aspect ratio trick.

body {
  text-align: center;
}

.divider {
  margin: 3em;
  display: inline-block;
  position: relative;
  padding: 1em;
  font-weight: bold;
}

.divider:after {
  content: "";
  position: absolute;
  width: 100%;
  padding-top: 100%;
  background: lightblue;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
}

OR

LONG TEXT