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

Here is a trick using radial-gradient. The idea is to keep the element full height and color it using circle closest-side which will always create a circle that will start from the center and expand to the closest sides (left and right one)

I simplified the code to keep only the relevant part:

.container {
  display: flex;
  flex-direction: row;
  margin:10px;
}

.left {
  flex: 1 1 auto;
  background-color: yellowgreen;
  height: 200px;
}

.right {
  flex: 1 1 auto;
  background-color: dodgerblue;
}

.divider {
  background-color: white;
  width: 6px;
  font-weight: 800;
  display: flex;
  justify-content: center;
}

.divider::after {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  content: attr(data-text);
  padding: 0 8px;
  background: radial-gradient(circle closest-side, white 98%, transparent 100%);
  z-index: 10;
}