Create colored circles with text

by MegaScience

HTML

Then I did a <span class="test">Rare<div class="circle"></div></span> Tax Token in R.E.P.O.

CSS

:root {
  --coin-scale: 1em;
}

.test {
  display: inline-flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  color: #F81894;
}

.circle {
  position: relative;
  display: inline-grid;
  margin-left: 0.25em;
  width: var(--coin-scale);
  height: var(--coin-scale);
}

.circle::after, .circle::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  width: var(--coin-scale);
  height: var(--coin-scale);
  border-radius: 50%;
  background: currentColor;
}
.circle::after {
  transform: translate(calc(var(--coin-scale) / 4), calc(var(--coin-scale) / 4)) rotateX(35deg) rotateY(-35deg);
  transform-origin: 0 0;
}

.circle::before {
  filter: brightness(60%);
  transform: translate(calc(var(--coin-scale) * -0.15 + (var(--coin-scale) / 4)), calc(var(--coin-scale) * -0.15 + (var(--coin-scale) / 4))) rotateX(35deg) rotateY(-35deg);
  transform-origin: 0 0;
}