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

Псевдоэлементы в CSS позволяют задать стиль элементов не определённых в дереве элементов документа, а также генерировать содержимое, которого нет в исходном коде текста.

Псевдоэлемент — это ключевое слово, добавляемое к селектору, которое позволяет стилизовать определённую часть выбранного элемента. Синтаксис:

Селектор:Псевдоэлемент { Описание правил стиля }

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

Псевдоэлементы очень похожи на псевдоклассы, но есть и отличия. Они представляют собой ключевые слова — на этот раз предваряемые двумя двоеточиями (::) — которые можно добавлять к селекторам, чтобы выделить определенную часть элемента.

Рассмотрим стандартные псевдоэлементы:

1. ::after

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

/* Добавить стрелки после ссылок */
a::after {
  content: "→";
}

2. ::before

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

/* Добавить сердце перед ссылками */
a::before {
  content: "♥";
}

3. ::first-letter

CSS псевдоэлемент ::first-letter применяет стили к первой букве первой строки блочного элемента, но только если нету другого предшествующего содержимого (такого как изображения или инлайн таблицы). Пример:

/* Стили для первой буквы элемента <p> */
p::first-letter {
  font-size: 130%;
}

4. ::first-line

CSS псевдоэлемент ::first-line применяет стили к первой строке блочного элемента. Длина первой строки зависит от многих факторов, включая ширину элемента, ширину документа и размер шрифта текста. Пример:

/* Стили для первой строки элемента <p> */
p::first-line {
  color: red;
}

В этой статье мы рассмотрели небольшую часть псевдоэлементов в css. Существует множество различных псевдоэлементов. Примеры различных псевдоэлементов можно найти в интернете в открытом доступе.