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

: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.