Псевдоэлементы

::before, ::after, content, декоративные элементы без лишнего HTML, кавычки, нумерация заголовков и атрибуты в content.

Уровень: средний 10 разделов 1,5 часа

1. Что такое псевдоэлементы

::before и ::after создают виртуальные первый и последний ребёнка элемента. Они не существуют в HTML, но ведут себя как настоящие коробки: получают стили, анимации, размеры. Используются, чтобы не плодить пустые теги для декора.

.tag { margin-right: 8px; }

.tag::after {
  content: " ·";          /* обязательное свойство — иначе псевдоэлемент не покажется */
  color: #94a3b8;
}

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

2. content и его возможности

content принимает строки, URL изображения, атрибуты элемента (attr()), счётчики и special-значения. Больше, чем «текст».

.link::after { content: " →"; }
.icon::before { content: ""; display: inline-block; width: 16px; height: 16px;
                background: url(arrow.svg) no-repeat; }
.user::after { content: " (" attr(data-role) ")"; color: #64748b; }

строки — любые символы (в том числе спецпоследовательности \2022 и пр.);
url() — встроить изображение, как фон или картинку;
attr(имя) — взять значение атрибута элемента;
счётчики и открывающие/закрывающие кавычки.

3. Декоративные подчёркивания и линии

h1::after {
  content: "";
  display: block;
  width: 60px;
  height: 4px;
  margin-top: 8px;
  background: #2563eb;
  border-radius: 2px;
}

.quote::before {
  content: "“";
  font-size: 3rem;
  color: #cbd5e1;
  position: absolute;
  left: -24px;
  top: 0;
}

Декоративные линии, иконки-подложки, вертикальные разделители — всему этому не место в HTML. Псевдоэлементы держат разметку чистой.

4. Кавычки и смарт-типографика

Используйте кавычки через content и открывающие/закрывающие символы «ёлочки» Unicode. Или связку quotes + content: open-quote/close-quote — браузер подставит правильные пары.

.note { quotes: "«" "»"; }   /* « » */
.note::before { content: open-quote; }
.note::after { content: close-quote; }

5. Нумерация через counter

CSS-счётчики автоматически нумеруют разделы и пункты без ручных «1.», «2.» в HTML. Ставит counter-increment на родителя/элемент и показывает в content.

.steps { counter-reset: step; }
.step::before {
  counter-increment: step;
  content: counter(step);
  display: inline-grid;
  place-items: center;
  width: 32px; height: 32px;
  background: #2563eb; color: #fff;
  border-radius: 50%;
}

6. Псевдоэлемент selection

::selection меняет вид выделяемого текста (фон, цвет). Крошечная деталь, которая может сильно порадовать привычкой выделения сайта.

::selection {
  background: #bfdbfe;
  color: #0f172a;
}

В тёмной теме собственный ::selection отлично сочетается с токеном фона. Не убирайте стандартный вид полностью — оставляйте контраст.

7. placeholder и других псевдоэлементов форм

::placeholder — плейсхолдер поля ввода (выборочно, только часть свойств);
::file-selector-button — кнопка выбора файла у input[type=file];
::marker — маркер списка (для li::marker);
::first-letter и ::first-line — оформление первого символа/строки.

.field::placeholder { color: #94a3b8; }
[type="file"]::file-selector-button { background: #eff6ff; border: 1px solid #93c5fd; }

8. Практика: чистые бейджи и счётчики

Собираем доставку: бейджи-цифры (как счётчики уведомлений), стрелки у карточек, разделители меню — без единого лишнего span в HTML.

.notif { position: relative; }
.notif::after {
  content: "3";
  position: absolute;
  top: -6px; right: -6px;
  min-width: 18px; height: 18px;
  padding: 0 4px;
  background: #ef4444; color: #fff;
  font-size: 12px;
  border-radius: 999px;
  display: grid; place-items: center;
}

9. Производительность и access

псевдоэлемент невидим для скринридеров: не кладите в него критичный текст;
анимации ::before/::after — обычные анимации, но max два псевдоэлемента на элемент;
если нужно три кружка — меняйте структуру или ::marker + ::after;
::before/::after любят, когда элемент создаёт контекст (position: relative).

Содержимое content не читается экранными ридерами (в большинстве). «· · ·» — нормально, а «Промокод сработал!» в content — плохо: озвучьте через настоящий текст или aria-label.

10. Чек-лист псевдоэлементов

content задан всегда, иначе псевдоэлемент не создастся;
декоративные линии/иконки — в ::before/::after, не в HTML;
номер пунктов через counter вместо ручной нумерации;
текст-подсказки и критичные данные не живут в content;
на элементах контентоемких блоков — самый максимум 2 псевдоэлемента.

Что дальше

Курс завершён.

← Вернуться к курсам