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

Для создания точки перед текстом с использованием псевдоэлементов ::before или ::after в CSS, вам потребуется использовать свойство content с соответствующим значением и задать необходимые свойства стилизации.

Вот пример кода HTML:

<p class="dot-before">Текст с точкой перед ним</p>

И вот пример кода CSS, который создаст точку перед текстом с использованием псевдоэлемента ::before:

.dot-before::before {
  content: "0B7"; /* Unicode значение для точки */
  margin-right: 0.5em; /* Расстояние между точкой и текстом */
  color: red; /* Цвет точки */
}

В данном примере мы использовали Unicode значение (0B7) для создания точки через свойство content. Затем мы задали отступ справа (margin-right) для создания расстояния между точкой и текстом. Наконец, мы установили желаемый цвет точки, но вы можете изменить его на любой другой цвет или использовать свойства background и border для завершения стилизации точки.

Используя указанные коды HTML и CSS, вы получите параграф с точкой перед текстом. Пожалуйста, обратите внимание, что вы можете применять аналогичный подход и к другим элементам HTML, если это необходимо.