css
Основы

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

CSS
Основы

Обновлено

14.09.2023

Просмотров

272

Время прочтения

15 мин.

Сложность

:before,:after

Псевдоэлемент — это ключевое слово, которое как правило добавляется к обычному селектору и позволяет стилизовать ту или иную часть элемента, например первую букву параграфа, его первую строку и т.д. Однако это не всегда так, есть два особенных псевдоэлемента :before и :after, при помощи которых можно добавить в разметку текст и даже изображения! Понять будет проще на примере:

                
<style> .text:before{ content: "before text"; color: blue; } .text:after{ content: "after text"; color: red; } </style> <p class="text">Привет, я текст!</p>

Как видите, при помощи данных псевдоэлементов мы добавили текстовый контент и стилизовали его особенным образом. В HTML разметке появилось «нечто», что больше всего похоже на ::marker из урока про HTML списки. Это не случайно, ведь marker тоже является псевдоэлементом. Так, псевдоэлементы по своей сути не теги, не текст и не стили, а совершенно особенная сущность. Настолько особенная, что добавленный при помощи :before и :after контент вообще никак не относится к тегу, к которому он был добавлен. Из-за этого в частности мы не можем взаимодействовать с псевдоэлементами через JavaScript.

Хотя :before,:after обладают всеми возможностями CSS и даже могут быть связаны определённым образом с HTML для создания интерактивных подсказок к тексту (читайте об этом тут), я бы не рекомендовал использовать их для добавления непосредственно текста, как в примере выше. В таком случае отображаемый контент мигрирует в CSS файл, а это нарушает принцип разделения разметки, стилей и скриптов. Используйте псевдоэлементы для добавления небольших иконок, декоративных и фоновых изображений и пр.

Синтаксис написания псевдоэлементов определён как ::after,::before и т.д. Это стандарт CSS 3. Однако если вы напишете одно двоеточие :after,:before (стандарт CSS 2), то браузеры тоже поймут и ошибки не будет. Как писать — решать только вам.

:first-letter

Применяется для стилизации первой буквы\символа выбранного блочного тега, например параграфа, section, div и пр. Включает в себя не только букву, а также знак пунктуации, находящийся перед или в некоторых случаях после неё. Если какой-то контент добавлен при помощи :before, то первой буквой будет считаться первый символ добавленного контента.

                
<style> p:first-letter{ color: red; font-size: 24px; font-weight: 600; } .added-content:before{ content: "Добавленный контент "; } </style> <p>Далеко-далеко за словесными горами в стране гласных, и согласных живут рыбные тексты. Большого повстречался, ipsum щеке всеми!</p> <p class="added-content">Текст с добавленным :before контентом</p> <p>_Текст со знаком пунктуации</p> <p>Т#екст со знаком пунктуации</p>

Как видите, первая буква или первый символ становится красным и большего размера. Также в последнем случае стилизуется и буква, и символ #, поскольку он относится в браузере к знакам пунктуации.

Не все CSS правила могут быть применены к первой букве, а только связанные со шрифтом, фоном, внешними и внутренними отступами, рамкой и декорациями текста. Полный список смотрите в справочнике.

:first-line

Подобно первой букве можно стилизовать и первую строку блочного или блочно-строчного тега. Также в формировании этой строки участвует добавленный контент, и также есть ограничения на CSS правила, которые мы можем применять к данному псевдоэлементу. Список свойств смотрите в справочнике.

                
<style> p:first-line{ color: red; font-size: 22px; font-weight: 600; } .added-content:before{ content: "Добавленный контент "; } </style> <p class="added-content">Далеко-далеко за словесными горами в стране гласных, и согласных живут рыбные тексты. Большого повстречался, ipsum щеке всеми!</p>

:placeholder

Представляет собой текст из HTML атрибута placeholder элементов <input> и <textarea>. Для стилизации доступны не все CSS правила, а только те, что доступны для псевдоэлемента :first-line.

                
<style> ::placeholder { color: blue; font-size: 18px; } </style> <input type="text" placeholder="Введите имя..."><br><br> <textarea placeholder="Введите сообщение..." cols="30" rows="10"></textarea>

Обратите внимание, что стили, да и сам placeholder никак не указаны в блоке Styles панели разработчика. Placeholder в панели разработчика доступен только в качестве атрибута HTML.

Если вы скопируете этот код в свой html файл, возможно placeholder на вашей странице не стилизуется.
Дело в том, что некоторые свойства и псевдоэлементы в разных браузерах называются по-разному, либо поддерживаются только
как экспериментальные технологии. Из-за этого они нуждаются в добавлении префиксов. Префиксы — это специальные атрибуты,
указываемые для свойств и селекторов, позволяющие определённым браузерам понять, как обрабатывать код.
К счастью, глубоко изучать тему префиксов, а также заучивать их не нужно. Просто воспользуйтесь автопрефиксером.
Вставьте свой CSS код в левую часть в сервисе и нажмите внизу кнопку «Применить». Код с добавленными префиксами отобразится в правой части. Скопируйте его и добавьте в свой html файл. После этого placeholder будет стилизован.

Весьма важным является вопрос стилизации placeholder. Рекомендации для разработчиков указывают, что данные подсказки не должны быть очень яркими (контрастными), поскольку пользователи с ограниченным возможностями или с проблемами восприятия, да и некоторые рядовые пользователи могут принять такие подсказки за уже введённый текст. Пример подсказки с высокой контрастностью — как раз наш пример выше. Цвет текста подсказки очень яркий и даёт основания полагать, что это уже введённый в поле текст, что может ввести в заблуждение. Хотя отрисовка элементов интерфейса это задача дизайнера, вы как разработчик должны тщательно следить за доступностью конечного продукта, ведь сайты делаются не для роботов, а для людей, и они должны быть удобными.

Сделайте placeholder немного прозрачным, это интуитивно будет рассмотрено пользователем как подсказка:

                
<style> ::placeholder { color: rgba(0,0,255,.5); font-size: 18px; } </style> <input type="text" placeholder="Введите имя..."><br><br> <textarea placeholder="Введите сообщение..." cols="30" rows="10"></textarea>

Мы рассмотрели не все псевдоэлементы, а только те, которые могут использоваться и используются регулярно. Есть ещё другие, их полный список вы найдёте в справочнике. Однако учтите, что среди оставшихся лишь два могут применяться — это ::cue и ::slotted. Они всё же используются настолько редко, что рассказывать о них здесь было бы лишним. Прочие псевдоэлементы из списка не обладают достаточной браузерной поддержкой и не должны использоваться в коммерческой разработке, это ::selection, ::backdrop, ::spelling-error, ::grammar-error.

Необходимо очков: