Содержимое ::before и ::after
Вставляйте генерируемое содержимое перед элементами или после них с помощью ::before и ::after и свойства content.
«Содержимое ::before и ::after» — бесплатный урок CSS Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения CSS Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс CSS Academy содержит 4 уроков всего.
Что такое псевдоэлементы?
Псевдоэлементы создают виртуальные элементы, которые стилизуются так, будто являются частью DOM. Они используют двойное двоеточие ::. Чаще всего используются ::before и ::after.
::before и ::after
::before вставляет созданное содержимое перед содержимым элемента. ::after вставляет его после содержимого. Для отображения обоим требуется свойство content.
<span class="element">Text with generated content</span>Свойство content
Свойство content принимает:
- Строку:
content: "text" - Пустую строку:
content: ""(часто используется для декоративных фигур) - URL:
content: url("icon.svg") - Счётчик:
content: counter(step) - attr():
content: attr(data-tooltip)
Декоративные кавычки
Добавляйте типографские кавычки, не добавляя их в HTML:
<blockquote>Design is not just what it looks like — design is how it works.</blockquote>Фигуры с пустым content
Установка content: "" вместе с позицией и размерами создаёт декоративные фигуры без дополнительного HTML:
<div class="card" style="position:relative;background:#fff;border:1px solid #ddd;padding:16px;margin-top:12px;">Card with a colored top bar drawn by ::before</div>Очистка обтекания с помощью ::after
Классический способ очистки обтекания использует ::after, чтобы обойтись без дополнительной разметки:
<div class="clearfix" style="border:1px solid #ccc;">
<div style="float:left;width:50%;background:#4f8cff22;padding:8px;">Floated column</div>
</div>Всплывающая подсказка с помощью ::after
Всплывающая подсказка только на CSS с использованием ::after и attr():
<span data-tooltip="Helpful hint" style="position:relative;display:inline-block;margin-top:24px;">Hover target</span>Значок с content: url()
Вставляйте небольшой значок перед ссылками с помощью content: url():
<a href="https://example.com" target="_blank" rel="noopener">External link</a>Ограничения псевдоэлементов
Псевдоэлементы отсутствуют в DOM. Они:
- Недоступны для выбора и поиска пользователями
- По умолчанию недоступны программам чтения с экрана
- Недоступны для обращения из JavaScript
Никогда не помещайте важный контент в сгенерированный контент — используйте псевдоэлементы только в декоративных целях.
Одинарное и двойное двоеточие
Одинарное двоеточие (:before) было синтаксисом CSS2. Двойное двоеточие (::before) — стандарт CSS3, который отличает псевдоэлементы от псевдоклассов. В современных браузерах работают оба варианта, но в новом коде используйте двойное двоеточие.
Какие элементы поддерживают ::before и ::after
Заменяемые элементы (img, input, select, video) не могут иметь псевдоэлементы, поскольку в них нет области контента, куда их можно вставить. Вместо этого используйте элемент-обёртку для оформления.
Быстрая проверка
Какое значение content требуется для декоративного псевдоэлемента ::before без видимого текста?
Повторение
::before и ::after вставляют сгенерированный контент до и после настоящего контента элемента. Свойство content обязательно. Используйте эти псевдоэлементы для декоративных фигур, значков, кавычек и всплывающих подсказок, но никогда не размещайте в них содержимое, к которому пользователям нужно получить доступ или которое им нужно прочитать.
Часто задаваемые вопросы
Урок «Содержимое ::before и ::after» бесплатный?
Да — полный текст урока «Содержимое ::before и ::after» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс CSS Academy, подпишись на CoddyKit PRO. Курс CSS Academy содержит 4 уроков всего.
Чему я научусь в уроке «Содержимое ::before и ::after»?
Вставляйте генерируемое содержимое перед элементами или после них с помощью ::before и ::after и свойства content. Ты практикуешь CSS Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать CSS Academy?
Предыдущий опыт не требуется. CSS Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.
Сколько времени занимает урок «Содержимое ::before и ::after»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке CSS Academy?
Да. Каждый урок CSS Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Содержимое ::before и ::after
- ::placeholder ::selection и ::marker
- Счётчики CSS с помощью ::before
- Декоративные узоры с псевдоэлементами