Псевдоэлемент before позволяет с помощью CSS добавить псевдотег внутрь другого элемента и оформить его. Содержимое псевдотега задаётся с помощью свойства content.

Например, у нас есть такой HTML:

<div class="queen heart">
  <em>Дама</em>
</div>

Добавим CSS-правило с необычным селектором с двойным двоеточием:

.heart::before { content: "Черви"; }

И HTML изменится вот так:

<div class="queen heart">
  <before>Черви</before>
  <em>Дама</em>
</div>

Но! Исходный HTML-код не изменится, тег <before> не попадёт в код страницы, а будет «виртуально» существовать где-то в браузере. Поэтому мы и используем приставку псевдо.

Ведёт себя псевдотег так же, как обычный <span> с текстом. Ему можно задавать дополнительные стили, например:

.heart::before {
  content: "Черви";
  color: red;
}

Чтобы псевдоэлемент появился, ему необходимо задать свойство content. Достаточно даже пустой строки в значении свойства — content: "";.