Справочник HTML & CSS

::before

Создаёт виртуальный первый дочерний элемент — для декоративного текста или фигур.

Синтаксис

selector::before { content: "…"; }

Примеры

Текст перед содержимым:

<style>
  .tip::before { content: "Tip: "; font-weight: bold; color: seagreen; }
</style>
 
<p class="tip">Save your work often.</p>

Декоративный кружок с пустым содержимым:

<style>
  .dot::before {
    content: "";
    display: inline-block;
    width: 10px; height: 10px;
    margin-right: 6px;
    border-radius: 50%;
    background: limegreen;
  }
</style>
 
<p class="dot">Online</p>

Примечания

Без свойства content псевдоэлемент вообще не появляется — нужен хотя бы пустой content: "". У элементов без содержимого, таких как <img> и <input>, псевдоэлементы не работают. Не помещайте в ::before важный текст: его нельзя выделить, и не все экранные чтецы его озвучивают.

См. также

::after — Создаёт виртуальный последний дочерний элемент — для значков, пометок и украшений после содержимого.
content — Содержимое псевдоэлементов `::before` и `::after`.

Вопросы и ответы по теме

В учебнике

Псевдоэлементы — Как оформить часть элемента или добавить декоративное содержимое — before, after, first-letter, marker, placeholder и selection.

Спасибо, что читаете!