Псевдоэлементы ::before и ::after
Как добавлять небольшие декоративные элементы без лишних тегов в документе.
Как это работает
::before и ::after создают оформляемые части перед содержимым элемента и после него. Для обычного отображения им требуется content, часто пустая строка. Их удобно использовать для полоски, точки или другого небольшого декоративного акцента.
Псевдоэлемент не должен быть единственным носителем важной информации. Если текст нужен для понимания или действия, поместите его в HTML. Для интерактивной кнопки также нужен настоящий элемент, а не псевдоэлемент с имитацией кликабельной области.
Пример в интерфейсе
.status::before { content: ""; display: inline-block; width: 8px; height: 8px; background: #11694e; border-radius: 50%; margin-right: 8px; }Значения и поведение
| Значение или правило | Результат |
|---|---|
| content: "" | Создание пустой декоративной части. |
| ::before | Перед содержимым элемента. |
| ::after | После содержимого элемента. |
| display | Определяет размеры и участие псевдоэлемента в строке. |
На что обратить внимание
Не вставляйте обязательные условия или подписи формы только через content. Доступность сгенерированного текста зависит от контекста и вспомогательных технологий.
Проверьте на практике
Измените размер и цвет точки. Сам текст «Готово к публикации» оставьте в HTML, чтобы значение не зависело от декора.
Связанные темы: selectors, border-radius.
Попробуйте сами
РЕЗУЛЬТАТ · ИЗОЛИРОВАННЫЙ ПРЕДПРОСМОТР
Измените код и нажмите «Запустить». JavaScript и внешние запросы отключены.
Самостоятельный учебный материал. Техническая документация: первоисточник по теме ↗. Если результат отличается, проверьте код и версию браузера.