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

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

Запись псевдоэлемента начинается с двух двоеточий ::, за которыми следует имя псевдоэлемента. Двойное двоеточие введено для разделения понятий псевдоклассов и псевдоэлементов. Для совместимости со старыми версиями стилей допускается использовать одно двоеточие для псевдоэлементов, введенных в CSS 1 и CSS 2 (а именно, :first-line, :first-letter, :before и :after). Для новых вводимых псевдоэлементов такая совместимость не будет предоставлена.

Только один псевдоэлемент может использоваться в селекторе, и только с тем элементом, к которому применяются стили. Возможно, в будущем будет возможность применять несколько псевдоэлементов в селекторе.

Краткое описание

::first-line

Описывает содержимое первой форматируемой строки элемента. Следует понимать, что длина первой строки зависит от ряда факторов, в том числе от ширины страницы, размера шрифта и др.

::first-letter

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

::before, ::after

Используются совместно со свойством content. Определяют, где будет располагаться генерируемое содержимое - до или после содержимого тега.