Первый псевдоэлемент: декоративный маркер без лишнего HTML

Назначение

Псевдоэлемент before позволяет добавить декоративную часть оформления без отдельного узла разметки. В упражнении он используется для небольшой точки перед подписью.

Как это работает

Для отображения before требуется подходящее content; пустая строка создаёт декоративную коробку. Размер, фон и отступ задаются CSS. Смысл подписи остаётся в настоящем тексте документа.

Пример

<style>.lesson-label::before{content:"";display:inline-block;width:.6em;height:.6em;border-radius:50%;background:#176b50;margin-inline-end:.5em;vertical-align:baseline}</style>
<p class="lesson-label">Учебный пример готов к проверке</p>

Что должно получиться

Перед подписью появляется круглая точка, а сам текст остаётся понятен без неё. В DevTools псевдоэлемент виден как часть представления выбранного элемента, хотя обычный querySelector не возвращает его как самостоятельный DOM-узел.

Граница применения и частая ошибка

Не помещайте в content единственную важную подпись или сообщение об ошибке: поведение вспомогательных технологий и копирования нужно учитывать отдельно. Декоративный маркер не должен подменять значение настоящего списка или статус, выраженный словами.

Самостоятельная проверка

Отключите правило before и убедитесь, что смысл не исчез. Измените размер шрифта: размеры в em должны масштабироваться. Затем попробуйте длинную подпись и оцените, не мешает ли декорация переносу строк.

Связанные материалы

• Локальный просмотр
• Вычисленные стили
• Проверка после публикации