Загрузка...

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

Псевдоклассы меняют вид, когда меняется состояние (:hover, :focus). Псевдоэлементы идут дальше: можно стилизовать часть текста или сделать маленькую коробку до или после реального содержимого — с двойным двоеточием (::) и без лишних тегов в HTML.

Что значит псевдоэлемент?

Псевдоэлемент — слово, которое крепится к селектору через ::. Он целится в то, чего нет как полного элемента в разметке: первая буква, первая строка или сгенерированная коробка до/после содержимого. Для ::before и ::after обычно нужен content, чтобы что-то появилось.

Четыре частых псевдоэлемента

Начните с этих. Старая форма с одним двоеточием (:before) ещё часто работает — всё равно пишите современную с двумя.

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

Псевдоэлемент Что стилизует Пример
::before Коробку перед содержимым элемента p::before
::after Коробку после содержимого элемента a::after
::first-letter Первую букву текстового блока p::first-letter
::first-line Первую строку текстового блока p::first-line

Перед содержимым — ::before и content

::before создаёт виртуальную коробку перед настоящим текстом. Почти всегда ставьте content — строку или "" для пустой декоративной коробки.

До — открывающая кавычка

css
CSS Code 
.quote::before {
content: "“";
color: #0f766e;
font-size: 1.5rem;
margin-right: 0.25rem;
}

Не забудьте content

Без content многие правила ::before/::after ничего не показывают. Для цветной полоски или фоновой иконки хватает content: "".

После содержимого — ::after

::after — та же идея после содержимого: единица, бейдж или маленький суффикс.

После — подсказка внешней ссылки

css
CSS Code 
a.external::after {
content: " ↗";
font-size: 0.85em;
}

Не прячьте нужный смысл здесь

Скринридеры и некоторые инструменты по-разному относятся к сгенерированному содержимому. Не кладите важные инструкции только в ::before/::after; настоящий текст оставьте в HTML.

Первая буква — ::first-letter

::first-letter стилизует первую букву текстового блока — классическая крупная буква в начале абзаца.

Первая буква — крупный начальный символ

css
CSS Code 
.lead::first-letter {
font-size: 2.5rem;
font-weight: 700;
color: #0f766e;
float: left;
line-height: 1;
margin-right: 0.15em;
}

Первая строка — ::first-line

::first-line стилизует только первую видимую строку — не «первое предложение», а строку, которую браузер собрал при переносе.

Первая строка — чуть жирнее

css
CSS Code 
.lead::first-line {
font-weight: 600;
color: #334155;
}

Пустая декоративная коробка

Иногда нужна только цветная полоска без текста. Достаточно content: "".

Пустой before — декоративная полоска

css
CSS Code 
.card::before {
content: "";
display: block;
height: 4px;
background: #0f766e;
margin-bottom: 0.75rem;
}

Хорошие привычки

  • Псевдоэлемент = двойное двоеточие (::before); псевдокласс = одно (:hover)
  • Ставьте content на ::before/::after, если что-то должно быть видно
  • Нужный текст держите в HTML, не только в сгенерированном содержимом
  • ::first-letter и ::first-line работают на текстовых блоках
  • Предпочитайте современное ::, даже если старое :before ещё работает

Попробуйте сами

  1. Короткая страница с абзацем .quote, абзацем .lead, ссылкой a.external и .card с текстом.
  2. Добавьте .quote::before { content: "“"; color: #0f766e; } и проверьте кавычку.
  3. На ссылке с class external: a.external::after { content: " ↗"; }.
  4. Увеличьте .lead::first-letter бирюзовым; стилизуйте .lead::first-line с font-weight: 600.
  5. Добавьте .card::before { content: ""; display: block; height: 4px; background: #0f766e; } для верхней полоски.

Частые ошибки

  • Писать :before, когда нужен состояние вроде :hover — состояние одно двоеточие; сгенерированная коробка два
  • Забыть content, и ничего не появится
  • Класть единственную копию предупреждения только в ::after
  • Ждать чуда от ::first-letter на пустом или только-картиночном элементе
  • Путать ::first-line с «первым предложением» — перенос браузера решает

Кратко

  • Псевдоэлементы с :: стилизуют часть или сгенерированную коробку
  • ::before/::after нужен content (строка или "")
  • ::first-letter и ::first-line берут начало текстового блока
  • Критический смысл остаётся в HTML
  • Одно двоеточие = псевдокласс; два = псевдоэлемент
  • Практикуйтесь с кавычкой, суффиксом ссылки и абзацем lead

🧠 Проверьте Свои Знания

Готов к Началу

Проверьте Свои Знания

Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему

❓
8
Вопросы
🎯
70%
Для Прохождения
♾️
∞
Время
🔄
∞
Попытки

📝 Инструкции

  • Внимательно прочитайте каждый вопрос
  • Выберите лучший ответ на каждый вопрос
  • Вы можете пересдавать тест столько раз, сколько захотите
  • Ваш прогресс будет показан вверху
Тема 1 из 1
Css Урок