Как сделать такую точке перед текстом в CSS с помощью after/before?

Question

[rise911]

Comments

[Ankhena]

Прямо так и сделать, писать подряд что вам нужно, скругление, зелененький и т.д.

::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 0.8em;
  aspect-ratio: 1;
  border-radius: 50%;
  background: green;
}

Answer 1

[archelon]

тут все просто

.my-element {
  display: inline-flex;
  align-items: center;
}
.my-element::before {
  content: '';
  width: .5em;
  height: .5em;
  border-radius: 1em;
  background-color: #20ff87;
  margin-right: .5em;
}