skip to main content

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

css

Кратко 🔗

Псевдоэлементы  —  это элементы, которых не существует в HTML-разметке. Они создаются и позиционируются исключительно при помощи CSS. Чаще всего используются для создания различных декоративных элементов, которые не имеют особого значения с точки зрения контента.

Так же псевдоэлементы приходят на помощь, когда нужно наложить поверх картинки так называемый оверлей. Но этим польза от псевдоэлеменов не заканчивается.

Пример 🔗

Самый частый сценарий использования псевдоэлемента — наложение полупрозрачной заливки поверх картинки (оверлея). Чаще всего это требуется на первом экране, но этим способом можно наложить оверлей на любое изображение на сайте.

<header class="header">
<h1 class="header__title">Good evening, Clarice.</h1>
</header>
.header {
background: #999999
url("background.svg")
no-repeat center / cover;
}

.header__title {
color: #ffffff;
font-size: 82px;
text-transform: uppercase;
text-align: center;
}

Чтобы цвет картинки был не таким ярким и текст лучше читался наложим поверх всего header полупрозрачную заливку чёрного цвета.

.header {
position: relative; /* Добавляем позиционирование родителю */
z-index: 0; /* Указываем порядок наложения */
}

.header:before {
content: ""; /* Обязательное свойство для псевдоэлементов :before / :after */
display: block;
position: absolute; /* Позиционируем относительно родителя */
top: 0;
left: 0;
/* Растягиваем на всю ширину и высоту */
width: 100%;
height: 100%;
background-color: rgba(0 0 0 / 0.7); /* Задаём полупрозрачный чёрный фон */
z-index: -1; /* Убираем под текст */
}

Не трогая HTML-разметку, мы добавили ещё один элемент в декоративных целях. Разметка осталась чистой. Псевдоэлементом легко управлять, добавлять или удалять его по необходимости, даже если нет доступа к HTML.

Как это понять 🔗

Определение приставки «псевдо» в словаре: «...Приставка, означающая ложность, ненастоящесть следующего за ней».

Из этого определения можно понять, что псевдоэлементы не существуют на самом деле. Это порождение CSS, которое можно изменять / удалять / добавлять, не трогая реальную HTML-разметку.

Как пишется 🔗

Существует несколько пседовэлементов. Рассмотрим каждый из них.

:before / :after 🔗

Два самых часто встречающихся псевдоэлемента. Они очень похожи между собой. Единственная разница заключается в том, что :before располагается по-умолчанию перед элементом, для которого задаётся. А :after в свою очередь располагается после элемента, для которого создаётся. Эта разница отражена в названии: слово before переводится с английского как «до» или «перед»; слово after переводится как «после».

Для обоих элементов обязательным является свойство content. С его помощью можно вставить какое-нибудь слово до или после текста.

Создадим текстовый элемент с именем пользователя.

<span class="username">Гордон</span>

Поприветствуем пользователя и скажем ему комплимент:

.username:before {
content: "Привет, ";
}

.username:after {
content: ", ты отлично выглядишь!";
}

Как видно в примере, текст из свойства content псевдоэлемента before встал перед именем пользователя, а из псевдоэлемента after — после.

Эта пара псевдоэлементов по-умолчанию являются строчными. Но это легко изменить при помощи стилей.

Подчеркнём декоративной линией текст.

.username {
display: inline-block; /* Чтобы линия была по ширине текста */
}

.username:before {
content: "Привет, ";
}

.username:after {
content: "";
display: block; /* Делаем псевдоэлемент блочным */
width: 100%;
height: 2px;
background-color: #F498AD;
}

:first-letter 🔗

При помощи этого псевдоэлемента можно выбрать первую букву в строке или абзаце текста. Это позволяет создать так называемую буквицу — большую декоративную букву в начале текста.

<p class="text">
В траве, около высоких муравейников...
</p>
.text:first-letter {
font-size: 52px; /* Увеличиваем размер первой буквы */
color: #ed4242; /* и красим её в красный цвет */
}

:first-line 🔗

Этот псевдоэлемент выбирает первую строку текста. Обрати внимание, что он сработает только для блочных элементов. Со строчными этот трюк не пройдёт.

Например, можно сделать «красную строку», правда, не так, как учили в школе =)

<p class="text">
В далекой и бледной глубине неба...
</p>
.text:first-line {
background-color: #ed4242; /* Красим первую строку в красный */
}

::selection 🔗

Важно: данный псевдоэлемент нужно писать именно с двумя двоеточиями.

С помощью псевдоэлемента ::selection можно управлять стилем текста, который пользователь выделяет при помощи мыши.

Внешний вид псевдоэлемента ::selection

Текст на сайте Smashing Magazine выделяется красным цветом. Использование псевдоэлемента ::selection позволяет выдержать стиль оформления во всём, вплоть до такой мелочи, как выделение текста.

Целесообразнее всего задавать этот псевдоэлемент не какому-то отдельному блоку, а всей странице целиком.

::selection {
background-color: #ed4242;
}

Если выделить текст в этом примере, то станет видно, что фон выделения будет ярко-красного цвета.

::placeholder 🔗

Этот псевдоэлемент также должен писаться с двумя двоеточиями.

Этот псевдоэлемент позволяет стилизовать текст, выводимый в поле ввода текста (input) в виде подсказки.

Текст подсказки задаётся при помощи атрибута placeholder у тега input.

<input type="email" placeholder="test@example.com" />

Внешний вид псевдоэлемента ::placeholder

По-умолчанию цвет текста подсказки серый. Но иногда по дизайну требуется другой цвет.

Используйте псевдоэлемент ::placeholder и задайте нужные стили для подсказки. Можно изменить всё, вплоть до шрифта. При этом стили текста, который будет вводить пользователь, не будут затронуты.

input::placeholder {
color: #70a0ff;
}

Подсказки 🔗

💡 Обязательно проверяй поддержку псевдоэлемента в нужных браузерах. Для этого можно использовать сайт https://caniuse.com/

💡 У свойства content есть несколько полезных трюков. Например, с помощью data-атрибута у тега (которому можно задать значение при помощи JavaScript) и значения attr(data-атрибут) вывести, например, количество непрочитанных сообщений на лейбле. Или количество товаров в корзине. Такой способ будет «дешевле» в том плане, что реальная HTML-разметка не изменяется.

💡 В качестве значения свойства content можно задавать символы юникод. Например, можно вставить символ копирайта при помощи записи content: "&#169;"

В работе 🔗

Алёна,

🛠 Очень интересный и полезный трюк — задавать кастомный счётчик спискам. Бывает необходимость добавить скобки после цифры вместо стандартной точки.

<ol class="list">
<li class="list__item">Определение</li>
<li class="list__item">Свойства</li>
<li class="list__item">Списки в языках программирования</li>
<li class="list__item">См. также</li>
<li class="list__item">Примечания</li>
</ol>

Для создания кастомного счётчика первым делом нужно сбросить стандартные маркеры списка:

.list {
list-style-type: none;
}

Теперь придумай и пропиши имя нового счётчика. Имя счётчика будет использоваться дальше.

.list {
list-style-type: none;
counter-reset: new-counter;
}

Говорим браузеру, что считать нужно именно пункты списка:

.list__item {
counter-increment: new-counter;
}

Теперь для каждого пункта списка прописываем псевдоэлемент :before и запускаем кастомный счётчик, дополняя его нужными символами. В текущем случае в кавычках добавляем круглую скобку и пробел:

.list__item:before {
content: counter(new-counter) ") ";
}

Подобным образом можно менять стили маркеров так, как заблагорассудится.

🛠 Псевдоэлементы — лучшее, что придумали в CSS 😆 Но с ними жить и верстать гораздо проще. Удели время и поищи интересные трюки и фишки, которые можно сделать при помощи пседоэлементов.

Эти маленькие друзья верстальщика могут удивить тебя своей могущественностью.

Их возможности заслуживают отдельной статьи. Например, такой, которую написал Крис Койер: https://css-tricks.com/pseudo-element-roundup/

Автор: Алёна,