• Теория
  • Теория

Псевдоэлемент ::before

Псевдоэлемент 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: "";.

Хотите начать карьеру веб-разработчика? Записывайтесь на профессию «Фронтенд-разработчик», которая стартует через 1 день. Всего от 4410 ₽в месяц.

Минимальный вид табов
  • index.html
HTML
HTML

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

100%
Бабушка Кекс

Притормози, дружище

Проходить вызовы части «Селекторы. Погружение» тренажёра «Погружение в селекторы» можно после регистрации и оформления подписки.